javascript关于继承的用法汇总_javascript技巧

本文实例汇总了javascript关于继承的用法。分享给大家供大家参考。具体如下:

例子:

复制代码 代码如下:

/**
* 实现子类继承父类,但不会产生多余的属性和方法
* @returns {Function}
*/
define(function(){
return function(subType, superType){
var proto = new Object(superType.prototype);
proto.constructor = subType;
subType.prototype = proto;
};
});
//——————————————————————————
define(function(){
function ostring(s)
{
this.str = s;
this.length = this.str.length;
}
ostring.prototype.show = function(){
alert(this.str);
};
return ostring;
});
//——————————————————————————
define(['inherit', 'ostring'], function(inherit, ostring){
function wstring(s){
//用call实现调用父类构造函数
ostring.call(this, s);
this.chlength = 2 * s.length;
}
//继承其他的属性
inherit(wstring, ostring);
wstring.prototype.add = function(w)
{
alert(this.str + w);
};
return wstring;
});

再看例子
一、用function实现:

复制代码 代码如下:

function Person(name) {
    this.name = name;
}
Person.prototype.getName = function() {
    return this.name;
}
function Author(name, books) {
    this.inherit=person;
    this.inherit(name);
    this.books = books;
   
}
var au=new Author("dororo","Learn much");
au.name

或者同等效力的:

复制代码 代码如下:

function Person(name) {
    this.name = name;
}
Person.prototype.getName = function() {
    return this.name;
}
function Author(name, books) {
    Person.call(this, name);
    this.books = books;
   
}
var au=new Author("dororo","Learn much");
au.getName

由于这只是将this作为参数,调用父类Person的构造函数,把赋予父类的所有域赋予Author子类,所以任何父类Person构造函数之外的定义的域(原型prototype),子类都不会继承。所以上面例子中,au.getName将是没有被定义的(undefined),因为getName是在Person的原型对象中定义的。

而且,子类的构造函数要在定义自己的域之前调用父类构造函数,免得子类的定义被父类覆盖掉。也就是说,Author定义属性book要在Person.call之后,否则会被Person中属性覆盖。同时,在子类中也最好不要用prototype来定义子类的函数域,因为在一个子类被new,实例化之后就要执行prototype,然后才是调用父类的构造函数,这样也容易被父类的属性覆盖掉。

二、用prototype实现:

复制代码 代码如下:

function Person(name) {
    this.name = name;
}
Person.prototype.getName = function() {
    return this.name;
}
function Author(name, books) {
    this.books = books; 
}
Author.prototype=new Person(name);
Author.prototype.constructor=Author;
Author.prototype.getBooks = function() {
    return this.books;
}
var au1=new Author("dororo1","Learn much");
var au2=new Author("dororo2","Learn less");
alert(au1.getName());
alert(au2.getName());

这种方法避免了function实现中,无法继承prototype的问题。因为 Author.prototype=new Person(name);new Person()实例会调用Person构造和原型的所有属性。但是缺点是已经实例化了Author.prototype。所以当子类实例化的时候,所有非基本数据类型都是reference copy。所以上面例子中,无论实例au1,还是au2返回的值都是dororo1.

三、用“混合”实现

复制代码 代码如下:

function Person(name) {
    this.name = name;
}
Person.prototype.getName = function() {
    return this.name;
}
function Author(name, books) {
    this.base = new Person(name);
    for(var key in this.base){
        if(!this[key]){
           this[key]=this.base[key];
           }
           }
    this.book=books;
}
var au1=new Author("dororo1","work");
var au2=new Author("dororo2","play");
alert(au1.getName());
alert(au2.getName());
au1.book;
au2.book;

 
属于扩展,把父类的所有域都拷贝到子类。完全没有上述两方面的问题。
寄生组合模式)

JS的继承包括属性的继承和方法的继承,他们分别通过不同的方法来实现。
1.属性的继承

属性的继承通过改变函数的执行环境来实现的。而改变函数的执行环境可以使用call()和apply()两种方法来实现。

我们首先创建一个Animal“类”(因为JS中没有类的概念,这里只是一个模拟,它实际上只是一个Function函数对象)。

复制代码 代码如下:

function Animal(typeName) {
//为当前方法的执行环境(this)添加一个属性typeName
//但是执行环境(this)要执行这个函数的时候才能确定
this.typeName = typeName;
this.colors = ["red","while"];
}
//想函数的原型里 添加 两个(对象共享的)的方法
Animal.prototype.Shout = function () { alert("我是:--" + this.typeName);};
Animal.prototype.Eat = function () { alert("我是:--" + this.typeName) };
//--定义一个狮子--“类”(其实就是一个函数)
function Lion(tn) {
//--执行Animal方法,并通过apply的第一个参数 修改了Animal的执行环境为Lion的this
//同样的,Lion的this,也要在执行的时候才能确定是谁
Animal.apply(this,["狮子"]);//--继承了父类的变量属性,this因为是new了Lion,this是Lion
}
Lion.prototype = Animal.prototype; //继承父类的方法,搞定--但是这写不好,当子类再添加方法时候,父类同样也有此方法,这是指针引用
Lion.prototype.Hunt = function () {
alert("我是:狮子,我要去捕猎~~·~");
}
var aminm = new Animal();
aminm.Hunt(); //---可以访问到子类的方法,这样就不好了
//----那么如何解决这个问题呢》??????
//---解决方案:继承方法时候可以这样写:
Lion.prototype = new Animal();//继承父类的方法,把Animal对象赋给了prototype原型,其实它里面也有属性
var lion = new Lion(); //new 关键字除了创建的,还会修改Lion对象的执行环境为Lion对象本身
// ---换句话说,就是new完了之后,Lion函数里的this就是Lion函数本身了,然后调用Lion函数

分析一下new关键字:

而new关键字是十分伟大的,在上段代码中,new关键字完成了以下几项工作:
1)开辟堆空间,以准备存储Lion对象
2)修改Lion对象本身的执行环境,使得Lion函数的this指向了Lion函数对象本身。
3)调用Lion“类”的“构造函数”,创建Lion对象
4)将Lion函数对象的堆地址赋值给变量l,这个时候l就指向了这个Lion函数对象
lion.Shout();
lion.Eat();
但是这种继承有个缺点:就是父类的构造函数的被调用了两次,call一次,然后new又一次。

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-11-08 18:22:05

javascript关于继承的用法汇总_javascript技巧的相关文章

JavaScript中常见的字符串操作函数及用法汇总_javascript技巧

本文实例总结了JavaScript中常见的字符串操作函数及用法.分享给大家供大家参考.具体分析如下: 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一.这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来.可惜的是,很多开发人员,当然我也

javascript中setAttribute兼容性用法分析_javascript技巧

本文实例分析了javascript中setAttribute兼容性用法.分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX. 2:自定义属性建议使用node.getAttribute("XXXX"). 3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX"),如label中的for. 4:当获取的目标是保留字,如:class,请使用className代替. setAttribute(string name,

javascript insertAfter()定义与用法示例_javascript技巧

本文实例讲述了javascript insertAfter()定义与用法.分享给大家供大家参考,具体如下: HTML部分: <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript部分: window.onload=function(){ var a =document.createElement("span"); var b =document.createTe

javascript的console.log()用法小结_javascript技巧

console.log 原先是 Firefox 的"专利",严格说是安装了 Firebugs 之后的 Firefox 所独有的调试"绝招". 这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错. 今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log.于是有人就提供了这样两句

JSON简介以及用法汇总_javascript技巧

JSON(JavaScript Object Notation)即JavaScript对象表示法,是一种轻量级的数据交换格式.它非常便于编程人员对数据的处理,也便于机器对数据的解析和生成,应用非常广泛. JSON是一种轻量级的数据交换格式,某个JSON格式的文件内部譬如可以长成这样: { "name": "hanzichi", "sex": "male" } 看起来都是key-value的键值对,很像js的对象吧?没错,但同时

javascript中一些util方法汇总_javascript技巧

javascript中一些util方法汇总 /***************原生对象工类方法****************/ /** * 判断非空 * @param obj * @returns {boolean} */ function isEmpty(obj) { if (obj == undefined || obj == null || new String(obj).trim() == '') { return true; } else { return false; } } /**

JavaScript中String.prototype用法实例_javascript技巧

本文实例讲述了JavaScript中String.prototype用法.分享给大家供大家参考.具体如下: // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=function() { return this.replace(/[^\x00-\xff]/g,"**").length; } // 判断字符串是否以指定的字符串结束 String.prototype.EndsWith = function(str) { return this.

谈一谈javascript中继承的多种方式_javascript技巧

JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法.那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中. console.log(o.__proto__ === Object.prototype) // true 继承的本质 console.log(o.__proto__ === Object

JavaScript数组对象赋值用法实例_javascript技巧

本文实例讲述了JavaScript数组对象赋值用法.分享给大家供大家参考.具体如下: 这里JavaScript数组对象的使用会使你的JS程序变得简洁而有效率,但是好像不少新手都不喜欢用数组,因为觉得它们抽象,不好理解,其实只要你认真领悟,它就像捅破窗户纸一样,令你豁然开朗.希望通过本实例,你对数组会有更多的理解. 运行效果图如下: 具体代码如下: <html> <head> <meta http-equiv="content-type" content=&