首页 技术 正文
技术 2022年11月11日
0 收藏 700 点赞 3,212 浏览 2064 个字

有关JavaScript的几种继承方式请移步JavaScript的几种继承方式

原型链的缺陷

SubType.prototype = new SuperType();

这样做的话,SuperType构造函数中的属性也会变成SubType原型中的属性,而我们需要SubType原型只继承SuperType原型

还有一点就是引用类型值属性的共享

寄生组合式继承的理解

为了结合原型链、组合继承和寄生式继承的优点,可以新建一个临时的类temp,temp.prototype指向父类的Prototype,然后创建一个temp实例,并给它加上一个constructor属性

这样,相当于用原型链的方法继承temp,由于temp的构造函数为空,所以只继承了原型上的属性,构造函数上的属性再用call或apply来继承

于是,我们可以把封装继承的函数进行修改,不使用object()或Object.create(),便于理解

//继承原型
function inheritPrototype(subType, superType){ //参数为两个类型的构造函数
var temp = function(){};
temp.prototype = superType.prototype;
var tempInstance = new temp(); //创建temp的实例tempInstance //给temp的实例tempInstance添加constructor属性,指向subType,虽然不是真的prototype.constructor,但是用来实现继承的效果是我们想要的
tempInstance.constructor = subType;
subType.prototype = tempInstance; //原型链继承
} function SuperType(name){
this.name = name;
this.colors = [];
} SuperType.prototype.sayName = function(){}; function SubType(name, age){
//继承构造函数中的属性
SuperType.call(this, name);
this.age = age;
} inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){};

不用temp,直接SubType.prototype = SuperType.prototype?

因为SubType.prototype直接指向了SuperType.prototype,所以改变子类prototype中的属性的话,父类prototype中的属性也会被改变

例子:

//子类改变会影响父类的情况function Animal(){
this.species = 'animal';
}Animal.prototype.color = 'red';function Cat(){
this.meow = 'meowmeowmeow';
}function Dog(){
this.bark = 'bow-wow';
}Cat.prototype = Animal.prototype;
Dog.prototype = Animal.prototype;var cat = new Cat();
var dog = new Dog();console.log(cat.color); //red
console.log(dog.color); //red
console.log(Animal.prototype.color); //redCat.prototype.color = 'blue';console.log(cat.color); //blue
console.log(dog.color); //blue
console.log(Animal.prototype.color); //blue//修正:将SubType的原型指向temp的一个临时创建的实例function Animal(){
this.species = 'animal';
}Animal.prototype.color = 'red';function Cat(){
Animal.call(this);
this.meow = 'meowmeowmeow';
}var temp = function(){};temp.prototype = Animal.prototype;
var tempInstance = new temp();
tempInstance.constructor = Cat;Cat.prototype = tempInstance;var cat = new Cat();console.log(cat.color); //red
console.log(Animal.prototype.color); //redCat.prototype.color = 'blue';console.log(cat.color); //blue
console.log(Animal.prototype.color); //red
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,489
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,904
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,737
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,490
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,128
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,291