资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JS继承这点儿事

JS继承这点儿事

kelvinlee / 192人阅读

摘要：用对象冒充继承构造函数的属性，用原型链继承的方法。但是属性暴露出了问题，每一个对象都有一个属性指向它的构造函数，而实例的构造函数却指向了，这会导致继承链的错乱。

ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。可以根据需求决定适合的继承方式。

原文链接

对象冒充

构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使ClassA构造函数成为ClassB的方法，然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。

function ClassA(name) {
    this.name = name;
    this.sayName = function () {
        console.log(this.name);
    };
}

function ClassB(name,age) {
    this.classA = ClassA;
    this.classA(name);
    delete this.classA;
    this.age = age;
    this.sayAge = function(){
        console.log(this.age);
    }
}

var tom = new ClassA("Tom");
var jerry = new ClassB("Jerry",25);
tom.sayName();                         //"Tom"
jerry.sayName();                       //"Jerry"
jerry.sayAge();                        //25
console.log(tom instanceof ClassA);    //true
console.log(jerry instanceof ClassA);  //false
console.log(jerry instanceof ClassB);  //true

所有新属性和新方法都必须在删除了新方法的代码行后定义，因为可能会覆盖超类的相关属性和方法

对象冒充可以实现多重继承
如果存在ClassA和ClassB，这时ClassC想继承这两个类，如下：

function ClassA(name){
    this.name = name;
    this.sayName = function (){
        console.log(this.name);
    }
}

function ClassB(age){
    this.age = age;
    this.sayAge = function(){
        console.log(this.age);
    }
}

function ClassC(name,age){
    this.method = ClassA;
    this.method(name);
    
    this.method = ClassB;
    this.method(age);
    delete this.method;
}

var tom = new ClassC("Tom",25);
tom.sayName();                       //"Tom";
tom.sayAge();                        //25
console.log(tom instanceof ClassA);  //false
console.log(tom instanceof ClassB);  //false
console.log(tom instanceof ClassC);  //true

这种实现方式的缺陷是：如果两个类ClassA和ClassB具有同名的属性或方法，ClassB具有高优先级，因为它从后面的类继承。
由于这种继承方法的流行，ECMAScript的第三版为Function对象加入了两个方法，即call()和apply()。

call

call方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作this的对象,其他参数都直接传递给函数自身

function sayName(prefix) {
    console.log(prefix + this.name);
};

var tom = {};
tom.name = "Tom";

sayName.call(tom, "This is ");  //"This is Tom"

函数sayName在对象外定义，但也可以引用this。
call方法改写对象冒充

function ClassA(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name);
    }
}

function ClassB(name,age){
    //this.method = ClassA;
    //this.method(name);
    //delete this.method;
    ClassA.call(this,name);
    this.age = age;
    this.sayAge = function (){
        console.log(this.age);
    }
}

var tom = new ClassB("Tom",25);
tom.sayName();                       //"Tom"
tom.sayAge();                        //25
console.log(tom instanceof ClassA);  //false
console.log(tom instanceof ClassB);  //true

call方法替代了使用属性引用ClassA的方式。

apply

apply方法有两个参数，用作this的对象和要传递给函数的参数数组

function sayName(prefex,mark) {
    console.log(prefex+ this.name+ mark);
};

var tom = {};
tom.name = "Tom";

sayName.apply(tom, ["This is ","!"]);  //"This is Tom!"

同样可以使用apply改写对象冒充

function ClassA(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name);
    }
}

function ClassB(name,age){
    ClassA.apply(this,arguments);
    this.age = age;
    this.sayAge = function (){
        console.log(this.age);
    }
}

var tom = new ClassB("Tom",25);
tom.sayName();                       //"Tom"
tom.sayAge();                        //25  
console.log(tom instanceof ClassA);  //false
console.log(tom instanceof ClassB);  //true

只有超类中参数顺序和子类中的参数完全一致时才可以传递参数数组

原型链

prototype对象是个模板，要实例化的对象都以这个模板为基础，prototype对象的任何属性和方法都被传递给这个类的所有实例，原型链就是利用这种功能来实现继承机制。

function ClassA() {}
ClassA.prototype.name = "Tom";
ClassA.prototype.sayName = function () {
    console.log(this.name);
};

function ClassB() {}
ClassB.prototype = new ClassA();
var tom = new ClassB();
tom.sayName();                       //"Tom"
console.log(tom instanceof ClassA);  //true
console.log(tom instanceof ClassB);  //true

这里把ClassB的prototype属性设置称ClassA的实例，避免逐个赋值prototpye属性。
在调用ClassA时没有设置参数，因为在原型链中要确保构造函数是无参的。
在原型链中，instanceof的结果也有了变化，对于ClassA和ClassB都返回了true。

因为prototype属性的重指定，子类中的新属性都必须出现在prototype被赋值后。

function ClassA() {}
ClassA.prototype.name = "Tom";
ClassA.prototype.sayName = function () {
    console.log(this.name);
};

function ClassB() {}
ClassB.prototype = new ClassA();
ClassB.prototype.age = 25;
ClassB.prototype.sayAge = function () {
    console.log(this.age);
};

var tom = new ClassA();
var jerry = new ClassB();
tom.sayName();                         //"Tom"
jerry.sayName();                       //"Tom"
jerry.name = "Jerry";
tom.sayName();                         //"Tom"
jerry.sayName();                       //"Jerry"
jerry.sayAge();                        //25
console.log(tom instanceof ClassA);    //true
console.log(jerry instanceof ClassA);  //true
console.log(jerry instanceof ClassB);  //true

原型链的缺陷是不能实现多重继承，因为类的prototype会被重写。

混合方式

对象冒充的问题是必须使用构造函数方式，而使用原型链就无法使用带参数的构造函数，不过，可以试试两者结合。
用对象冒充继承构造函数的属性，用原型链继承prototype的方法。

function ClassA(name) {
    this.name = name;
}
ClassA.prototype.sayName = function () {
    console.log(this.name);
};

function ClassB(name, age) {
    ClassA.call(this, name);
    this.age = age;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayAge = function () {
    console.log(this.age);
};

var tom = new ClassA("Tom");
var jerry = new ClassB("Jerry",25);
console.log(tom instanceof ClassA);                    //true
console.log(jerry instanceof ClassA);                  //true
console.log(jerry instanceof ClassB);                  //true
console.log(jerry.constructor === ClassA);             //true
console.log(ClassB.prototype.constructor === ClassA);  //true

在ClassB构造函数中用对象冒充继承了ClassA的name属性，用原型链继承了ClassA的sayName方法，由于使用了原型链继承方式，instanceof运行方式正常。
但是constructor属性暴露出了问题，每一个prototype对象都有一个constructor属性指向它的构造函数，而ClassB实例的构造函数却指向了ClassA，这会导致继承链的错乱。可以手动修改constructor的指向。

function ClassA(name) {
    this.name = name;
}
ClassA.prototype.sayName = function () {
    console.log(this.name);
};

function ClassB(name, age) {
    ClassA.call(this, name);
    this.age = age;
}
ClassB.prototype = new ClassA();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () {
    console.log(this.age);
};

var tom = new ClassA("Tom");
var jerry = new ClassB("Jerry",25);
console.log(tom instanceof ClassA);                    //true
console.log(jerry instanceof ClassA);                  //true
console.log(jerry instanceof ClassB);                  //true
console.log(ClassA.constructor === ClassB);            //false
console.log(jerry.constructor === ClassA);             //false
console.log(ClassB.prototype.constructor === ClassA);  //false
直接继承原型链

为了节省内存，可以不执行创建ClassA实例，直接让ClassB的原型指向ClassA的原型

function ClassA(name) {
    this.name = name;
}
ClassA.prototype.sayName = function () {
    console.log(this.name);
};

function ClassB(name, age) {
    ClassA.call(this, name);
    this.age = age;
}
ClassB.prototype = ClassA.prototype;
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () {
    console.log(this.age);
};

var tom = new ClassA("Tom");
var jerry = new ClassB("Jerry",25);
console.log(ClassA.prototype.hasOwnProperty("sayAge"));  //true
console.log(ClassA.prototype.constructor === ClassB);   //true

这样的缺陷是由于直接修改原型链指向，对于ClassB原型链中的属性也会影响到ClassA上，于是就出现了ClassA具有sayAge方法、ClassA的构造函数属性为ClassB。

空对象作中介

为解决直接继承原型链的缺点，可以利用一个空对象作为中介。

function ClassA(name) {
    this.name = name;
}
ClassA.prototype.sayName = function () {
    console.log(this.name);
};

function ClassB(name, age) {
    ClassA.call(this, name);
    this.age = age;
}

var fn = function(){};
fn.prototype = ClassA.prototype;
ClassB.prototype = new fn();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () {
    console.log(this.age);
};
console.log(ClassA.prototype.hasOwnProperty("sayAge"));  //false
console.log(ClassA.prototype.constructor === ClassB);    //false

虽然还是创建了对象实例，但由于空对象几乎不占内存，修改ClassB的原型也不会影响到ClassA。

封装成extends方法

function extends(child,parent){
    var fn = function (){};
    fn.prototype = parent.prototype;
    child.prototype = new fn();
    child.prototype.constructor = child;
    child.super = parent.prototype;
}

JS的灵活性使我们可以通过多种方式实现继承，了解其中的原理和实现可以帮助我们在不同的场景中选择适合的方法。

私有云 超融合服务器 js 继承 js继承 js继承模式 js组合继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/67752.html

相关文章

  • 写给在迷茫中前行的前端学习/工作者

    摘要：我从今年的月份开始在知乎上连续回答前端开发相关的问题，至今已有将近三个月，回顾写过的一百多条回答，不少是给迷茫的前端工作者的建议。今天我把我的思考提炼整理成文，希望能给予在迷茫中前行中的前端学习工作者一些有用的建议。 本文首发于知乎专栏——前端指南作者：Mark MFS老师转载请注明来源。 我从今年的2月份开始在知乎上连续回答前端开发相关的问题，至今已有将近三个月，回顾写过的一百多条回...

    罗志环 评论0 收藏0

  • 体验javascript之美6：如果你觉得什么都会了或者不知道js学什么了看这里-面向对象编程

    摘要：面向过程函数式编程面向对象编程第二个并不是大家理解的那样，我们先说举个现实例子就明白了。多说一句函数是编程是非常强大也是我最喜欢的，以后再说，我们先说面向对象编程。 概述 当大家已经把js的语言基础理解了，然后能够写出一些简单的例子了，这个时候基本上达到了一年工作经验的水平，而自己能够独立的写一些小功能，完成一些小效果，或者临摹修改一些比较复杂的插件的时候差不多就是两年工作经验的水平，...

    novo 评论0 收藏0

  • 体验javascript之美6：如果你觉得什么都会了或者不知道js学什么了看这里-面向对象编程

    摘要：面向过程函数式编程面向对象编程第二个并不是大家理解的那样，我们先说举个现实例子就明白了。多说一句函数是编程是非常强大也是我最喜欢的，以后再说，我们先说面向对象编程。 概述 当大家已经把js的语言基础理解了，然后能够写出一些简单的例子了，这个时候基本上达到了一年工作经验的水平，而自己能够独立的写一些小功能，完成一些小效果，或者临摹修改一些比较复杂的插件的时候差不多就是两年工作经验的水平，...

    changfeng1050 评论0 收藏0

  • js面向对象浅析--继承那些事

    摘要：有需要还可以修改指向谦龙寄生组合式继承思路是通过借用构造函数来继承属性，通过原型链的混合形式来继承方法改变执行环境实现继承有需要还可以修改指向谦龙谦龙拷贝继承该方法思路是将另外一个对象的属性和方法拷贝至另一个对象使用递归 前言 js中实现继承的方式只支持实现继承，即继承实际的方法，而实现继承主要是依靠原型链来完成的。 原型链式继承 该方式实现的本质是重写原型对象，代之以一个新类型的实例...

    molyzzx 评论0 收藏0

  • 从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 - 你的对象班（class）里来的？

    摘要：这是因为子类没有自己的对象，而是继承父类的对象，然后对其进行加工。 温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？温馨提示-再续：ES6简直了，放着不用简直令人发指！ 书接上回，即便是程序员，也还是能够通过自己的努力辛辛苦苦找到合适对象的，见前文《javascript对象不完全...

    incredible 评论0 收藏0

发表评论

登陆后可评论

0条评论

kelvinlee

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<