摘要:用对象冒充继承构造函数的属性,用原型链继承的方法。但是属性暴露出了问题,每一个对象都有一个属性指向它的构造函数,而实例的构造函数却指向了,这会导致继承链的错乱。
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方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作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的方式。
applyapply方法有两个参数,用作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的灵活性使我们可以通过多种方式实现继承,了解其中的原理和实现可以帮助我们在不同的场景中选择适合的方法。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/67752.html
摘要:我从今年的月份开始在知乎上连续回答前端开发相关的问题,至今已有将近三个月,回顾写过的一百多条回答,不少是给迷茫的前端工作者的建议。今天我把我的思考提炼整理成文,希望能给予在迷茫中前行中的前端学习工作者一些有用的建议。 本文首发于知乎专栏——前端指南作者:Mark MFS老师转载请注明来源。 我从今年的2月份开始在知乎上连续回答前端开发相关的问题,至今已有将近三个月,回顾写过的一百多条回...
摘要:面向过程函数式编程面向对象编程第二个并不是大家理解的那样,我们先说举个现实例子就明白了。多说一句函数是编程是非常强大也是我最喜欢的,以后再说,我们先说面向对象编程。 概述 当大家已经把js的语言基础理解了,然后能够写出一些简单的例子了,这个时候基本上达到了一年工作经验的水平,而自己能够独立的写一些小功能,完成一些小效果,或者临摹修改一些比较复杂的插件的时候差不多就是两年工作经验的水平,...
摘要:有需要还可以修改指向谦龙寄生组合式继承思路是通过借用构造函数来继承属性,通过原型链的混合形式来继承方法改变执行环境实现继承有需要还可以修改指向谦龙谦龙拷贝继承该方法思路是将另外一个对象的属性和方法拷贝至另一个对象使用递归 前言 js中实现继承的方式只支持实现继承,即继承实际的方法,而实现继承主要是依靠原型链来完成的。 原型链式继承 该方式实现的本质是重写原型对象,代之以一个新类型的实例...
摘要:这是因为子类没有自己的对象,而是继承父类的对象,然后对其进行加工。 温馨提示:作者的爬坑记录,对你等大神完全没有价值,别在我这浪费生命温馨提示-续:你们要非得看,我也拦不住,但是至少得准备个支持ES6的Chrome浏览器吧?温馨提示-再续:ES6简直了,放着不用简直令人发指! 书接上回,即便是程序员,也还是能够通过自己的努力辛辛苦苦找到合适对象的,见前文《javascript对象不完全...
阅读 933·2021-09-07 09:58
阅读 1484·2021-09-07 09:58
阅读 2868·2021-09-04 16:40
阅读 2500·2019-08-30 15:55
阅读 2404·2019-08-30 15:54
阅读 1363·2019-08-30 15:52
阅读 423·2019-08-30 10:49
阅读 2597·2019-08-29 13:21