浅谈原型链及原型链继承

1、什么是原型链？
JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性是，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。更详细的解释点击here查看。

2、原型链示意图

3、JS实现继承的方式
这里只列举4种（原型链继承、构造继承继承、组合继承、es6–Class继承）

//定义一个父类
function Father(name){//属性this.name = name || "father";//实例方法this.sayName = function (){console.log(this.name);};this.color = ['red','blue'];
};//原型方法
Father.prototype.age = 18;
Father.prototype.sayAge = function(){console.log(this.age)
}

（1）原型链继承（将父类作为子类的原型）

function Son(name){this.name = name || "son";
};Son.prototype = new Father();let s1 = new Son('s1');
let s2 = new Son('s2');s1.color.push('black');console.log(s1.name);//s1
console.log(s1.color);//['red','blue','black']
console.log(s1.age);//18
s1.sayAge();//18
console.log(s2.name);//s2
console.log(s2.color);//['red','blue','black']

原型链继承优点：
1.简单，易于实现。
2.父类新增原型方法、原型属性，子类都能访问到。

原型链继承缺点：
1.无法实现多继承，因为原型一次只能被一个实例更改。
2.来自原型对象的所有属性被所有实例共享（例子中的color属性）
3.创建子类实例时，无法向父构造函数传参。

//-------------------------------------------------------------------------

（2）构造继承

function Son(name){Father.call(this,"这是传给父类的参数");this.name = name || "son";
}let s = new Son('son');
console.log(s.name);//son
//s.sayAge();//抛出错误（无法继承父类原型方法）
s.sayName();//son
console.log(s.age);//underfind （无法继承父类原型属性）
console.log(s instanceof Father);//false
console.log(s instanceof Son);//true

构造继承优点：
1.解决了原型链继承中子类实例共享父类引用属性的问题。
2.创建子类实例时，可以向父类传递参数。
3.可以实现多继承（call多个父类对象）。

构造继承缺点：
1.实例并不是父类的实例，只是子类的实例。
2.只能继承父类实例的属性与方法，不能继承其原型上的属性和方法。
3.无法实现函数复用，每个子类都有父类实例函数的副本，影响性能。

//----------------------------------------

3、组合继承：将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型的属性和方法的继承，而通过构造函数来实现对实例属性的继承。（原型链继承+构造继承继承）

function Son(name){//第一次调用父类构造器 子类实例增加父类实例Father.call(this,"这是传给父类的参数");this.name = name || "son";
}
//经过new 运算符 第二次调用父类构造器 子类原型也增加父类的实例
Son.prototype = new Father();let s = new Son('son');
console.log(s.name);//son
s.sayAge();//18
s.sayName();//son
console.log(s.age);//18
console.log(s instanceof Father)//true
console.log(s instanceof Son)//true
console.log(s.constructor === Father);//true
console.log(s.constructor === Son);//false

组合继承优点：
1.弥补了构造继承的缺点，现在既可以继承实例的属性和方法，也可以继承原型的实例和方法
2.既是子类的实例，也是父类的实例
3.可以向父类传递参数
4.函数可以复用
组合继承缺点：
1.调用了两次父类构造函数，生成了两份实例
2.constructor指向问题

//-------------------------
4、es6–Class继承：使用extends表明继承自哪个父类，并且在子类构造函数中必须调用super

class Son extends Father {constructor(name){super(name);this.name = name || "son";}
}let s = new Son("son");
console.log(s.name);//son
s.sayAge();//18
s.sayName();//son
console.log(s.age);//18
console.log(s instanceof Father);//true
console.log(s instanceof Son)//true
console.log(s.constructor === Father);//false
console.log(s.constructor === Son);//true

浅谈原型链及原型链继承相关推荐

浅谈华为如何实现区块链的安全隐私保护
摘要:区块链节点的租户隔离机制.安全合规性的国密算法支持机制以及范围可验证的同态加密机制下,华为区块链服务的增强安全特性浅谈. 1. 华为区块链服务安全特性介绍本文介绍华为云区块链服务BCS(Blo ...
集承享——浅谈基于内容的全链档案管理与服务
2022年4月16日,由中国人民大学电子文件管理研究中心.中国人民大学信息资源管理学院主办的第十二届"中国电子文件管理论坛"成功在京举办.已举办十二届的该论坛是中国电子文件管理领域 ...
浅谈JavaScript对象的原型prototype
前提: 在JavaScript中一切皆对象,分为普通对象和函数对象,每个对象都有原型(undefined和null没有原型,所以undefined和null也就没有toSting方法). Object ...
浅谈软件工程中的“原型开发”
最近作者在参与一个APP的简单开发项目,关于图书推荐.在进行项目探索的时候,不明确用户需求,不知如何下手,于是便和小伙伴们一起交流,在各个相关软件中寻找灵感,最终慢慢摸索出一个简单粗糙的雏形,这便是原 ...
Adrealm智库专栏：数据之示—浅谈数据主义、区块链与广告
原文题目:Dataism, Blockchain and Advertising: What will the Data Say? 作者简介:Henry Zhang,现任Adrealm中国区市场总监, ...
浅谈JavaScript中的原型prototype
之前看过一些关于原型的知识,但总是看了以后没有及时应用,导致再看到一些代码是遇到还是搞不清楚,借此机会谈一下我对prototype的理解. 1.再谈原型之前,我们要知道什么是构造器函数,型如下例: f ...
昊天善圈浅谈比特币这个类型区块链应用技术的特点及作用
比特币是一种分期数字货币,可以说是区块链技术应用的典型案例,比特币是一种"稀缺资产",需要通过"数字挖掘"(挖矿)来创建,比特币由于资源稀缺,从出现到现在价值已 ...
浅谈JAVA设计模式之——责任链模式(COR)
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/45569099 一.概述使多个对象都有机会处理请求,从而避免请求的发送者和接收者之 ...
浅谈市场降温后的区块链发展前景
近期以来,以区块链技术为核心延伸出来的整个市场都有一种降温的趋势.特别是在国外的加密市场,更是一度惨淡,整个加密市场可以说是一度大崩. 尽管是在这样一股下行的趋势下,目前资本在区块链领域中的投资依然持 ...
凯撒密码中有数字怎么办_【论链】浅谈量子计算与区块链中的密码安全
来源:武谷论链作者:尤浩量子力学博士以下是尤浩博士链导讲堂分享记录: 任正非专访任正非专访任正非专访任正非专访任正非最新采访:区块链在量子计算面前一钱不值 (2019-11-06) 任正非 ...

浅谈原型链及原型链继承

浅谈原型链及原型链继承相关推荐

最新文章

热门文章