JavaScript实现继承的6种方式
**1 、原型链继承**
将构造函数的原型设置为另一个构造函数的实例对象,这样就可以继承另一个原型对象的所有属性和方法,可以继续往上,最终形成原型链。
第一个问题是,当实现继承后,另一个原型的实例属性,变成了现在这个原型的原型属性,然后该原型的引用类型属性会被所有的实例共享,这样继承原型引用类型属性的实例之间不再具有自己的独特性了。
第二个问题是,在创建子类型的实例时,没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。
**2、借用构造函数继承**
为了解决原型中包含引用类型值的问题,开始使用借用构造函数,也叫伪造对象或经典继承
```
function SuperType() {
this.colors = ["red", "blue", "green"];
}
function SubType() {
//继承SuperType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"
```
将SuperType函数在SubType构造函数中调用,在每个实例中执行,这样每个实例中都会有一份SuperType中的属性方法的副本,也就实现了继承SuperType。
这种模式的优势就是可以在子类型构造函数中向超类型构造函数传递参数。
存在的问题就是,所有的类型都只能使用构造函数模式(因为超类型的原型中定义的方法对于子类型不可见),因此方法都在构造函数中定义,函数复用就无从谈起了。
**3、组合继承**
也叫伪经典继承,将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承。
```
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
alert(this.name);
}
function SubType(name, age) {
// 继承属性
SuperType.call(this, name);
this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
```
将SubType的原型指定为SuperType的一个实例,大致步骤和原型链继承类似,只是多了在SubType中借调SuperType的过程。
实例属性定义在构造函数中,而方法则定义在构造函数的新原型中,同时将新原型的constructor指向构造函数。
可以通过instanceof和isPrototypeOf()来识别基于组合继承创建的对象。
避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为JS中最常用的继承模式。
实际上是借用了构造函数,以覆盖的方式,解决了在原型链继承中原型的引用类型属性共享在所有实例中的问题。
因为在子类型中借调构造函数(SuperType.call(this))时,会在自己的所有实例中执行一遍SuperType中的代码,由于每个实例this都是不同的,因此SuperType中定义的属性会在每个实例中有一份副本,也就避免了原型链继承中,原型属性共享的问题(覆盖了原型属性)。
**4.、原型式继承**
不自定义类型的情况下,临时创建一个构造函数,借助已有的对象作为临时构造函数的原型,然后在此基础实例化对象,并返回。
```
function object(o){
function F(){}
F.prototype = o;
return new F();
```
本质上是object()对传入其中的对象执行了一次浅复制
```
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
```
原型的引用类型属性会在各实例之间共享。
当只想单纯地让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。
注意:
ES5 通过新增 Object.create()方法规范化了原型式继承。这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,Object.create()与这里的object()方法的行为相同。第二个参数与Object.defineProperties()方法的第二个参数格式相同:每个属性都是通过自己的描述符定义的。
**5、寄生式继承**
其实就是在原型式继承得到对象的基础上,在内部再以某种方式来增强对象,然后返回。
```
function createAnother(original) {
var clone = object(original);
clone.sayHi = function() {
alert("hi");
};
return clone;
}
```
思路与寄生构造函数和工厂模式类似。
新的对象中不仅具有original的所有属性和方法,而且还有自己的sayHi()方法。
寄生式继承在主要考虑对象而不是自定义类型和构造函数的情况下非常有用。
由于寄生式继承为对象添加函数不能做到函数复用,因此效率降低。
**6、寄生组合式继承**
组合继承是JS中最常用的继承模式,但其实它也有不足,组合继承无论什么情况下都会调用两次超类型的构造函数,并且创建的每个实例中都要屏蔽超类型对象的所有实例属性。
寄生组合式继承就解决了上述问题,被认为是最理想的继承范式。
```
function object(o) {
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(superType, subType) {
var prototype = object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SuperType, SubType); // 这一句,替代了组合继承中的SubType.prototype = new SuperType()
SubType.prototype.sayAge = function() {
alert(this.age);
};
```
既然在组合模式中我们通过借调构造函数来为每个实例定义实例属性,从而覆盖原型属性,影响了效率,那么是否可以把原型改变一下呢,不让它作为SuperType的实例,这样就不会有一些无用的原型属性了。
不必为了指定子类型的原型而调用超类型的构造函数,我们需要的只不过是超类型原型的一个副本。
在inheritPrototype()函数中所做的事:
在inheritPrototype函数中用到了原型式继承中的object()方法,将超类型的原型指定为一个临时的空构造函数的原型,并返回构造函数的实例。
此时由于构造函数内部为空(不像SuperType里面有实例属性),所以返回的实例也不会自带实例属性,这很重要!因为后面用它作为SubType的原型时,就不会产生无用的原型属性了,借调构造函数也就不用进行所谓的“重写”了。
然后为这个对象重新指定constructor为SubType,并将其赋值给SubType的原型。这样,就达到了将超类型构造函数的实例作为子类型原型的目的,同时没有一些从SuperType继承过来的无用原型属性。
- 前端综合问题
- 【01】工作中你是如何检测浏览器兼容问题的?
- 【02】手机端怎么适配?
- 【03】你对手机平台安装包后缀的理解
- 【04】你所了解的Web攻击技术
- 【05】如何防止XSS攻击?
- 【06】项目开发过程中都用过什么框架?
- 【07】一般情况下,端口号的取值范围是多少?
- 【08】简述http常见的状态码及含义
- 【09】CommonJS,AMD,CMD区别
- 【10】Svn与Git的区别
- 【11】http请求方式有几种?分别是什么?
- 【12】请你谈谈cookie的弊端?
- 【13】window对象常用的属性和方法有那些
- 【14】你有哪些性能优化的方法?
- 【15】web页面重构怎么操作?
- 【16】线程与进程的区别是什么?
- 【17】什么是WEB标准?什么是W3C标准?
- 【18】行内元素有哪些? 块级元素有哪些? CSS的盒模型?
- 【19】你如何优化自己的代码?
- 【20】如何实现浏览器内多个标签页之间的通信?
- 【21】请谈一下你对网页标准和标准制定机构重要性的理解
- 【22】浏览器是如何渲染页面的
- 【23】从输入url到显示页面,都经历了什么
- 【24】谈谈垃圾回收机制方式及内存管理
- 【25】请解释JSONP的工作原理,以及它为什么不是真正的AJAX
- 【26】http 和 https 有何区别?如何灵活使用?
- 【27】浏览器缓存有哪些,通常缓存有哪几种
- 【28】xml和json的区别
- 手写代码及阅读题
- 【01】计算1-10000中出现的0 的次数
- 【02】写一个兼容的function,清除字符串前后的空格
- 【03】请对一个数组的数组从小到大进行排序
- 【04】以下代码输出什么[空函数返回值]
- 【05】下面代码输出什么?[各种类型拼接]
- 【06】常用的两种函数声明有什么区别?
- 【07】请计算一个对象的长度
- 【08】看下面代码,给出输出结果[计时器]
- 【10】看下列代码,输出什么? [null相关]
- 【11】写一个正则,字母开头,后面可以是数字,下划线,字母,长度6-30
- 【12】以下代码的alert的值分别是多少?
- 【13】如何获取三个数中的最大值和最小值?
- 【14】数组去重几种方法是什么?
- 【15】求数组中的最大值
- 【16】求数组中的最小值
- 【17】获得每个月1号是星期几?
- 【18】将字符串转化为驼峰表示法
- 逻辑题目
- 【01】1元1瓶汽水,2个空瓶再换1瓶汽水,30元最多能喝几瓶?
- 【02】有8个球体,外观一样,但有1个球比其他7个球重,给你一个天平,几次能找出那个较重的球?
- CSS3
- 【01】把一个div变成圆左边蓝色 右边绿色
- 【02】css盒模型有哪些及区别
- 【03】什么是css盒模型
- 【04】如何让英文小写转换为大写
- 【05】 去掉inline-block元素间隙的几种方法
- 【06】less和sass的特点和区别
- 【07】什么叫优雅降级和渐进增强?
- 【08】rgba和opacity的透明何不同?
- 【09】css选择器有那些?CSS3新增了哪些
- 【10】CSS3有哪些新特性?
- 【11】display属性有哪些?
- 【12】box-sizing的属性和作用
- 【13】CSS样式覆盖规则
- HTML5
- 【01】请列举5个html5输入类型?并简要描述其用途?
- 【02】em和rem的区别?
- 【03】精灵图和base64 如何选择,或者字体图标什么时候使用?
- 【04】position定位有几种?有什么区别?哪几个是脱离文档流的?
- 【05】垂直水平居中的方法有几种?
- 【06】清除浮动的方法有哪些?
- 【07】link和import的区别
- 【08】opacity/visibility/display 隐藏对比
- 【09】XHTML和HTML有什么区别
- 【10】什么是语义化的HTML?
- 【11】常见的浏览器内核有哪些?
- 【12】HTML5有哪些新特性,移除了哪些元素?
- 【13】如何处理HTML5新标签的浏览器兼容问题?
- 【14】HTML5为什么只需要写!DOCTYPE HTML?
- 【15】介绍以下你对浏览器内核的理解?
- 【16】行内元素有哪些?块级元素有哪些?
- 【17】标签上title与alt属性的区别是什么?
- 【18】前端页面有哪三层构成是什么?作用是什么?
- 【19】H5特点有哪些?
- 【20】HTML5里的video标签支持哪些视频格式?
- 【21】margin-top父元素塌陷及解决办法
- 【22】透明度opacity的兼容写法
- 【23】让一行文字在固定宽度div里显示省略号的方法
- 【24】如何解决input和select的宽高不一致问题
- 【25】如何解决div与内部img间隙问题
- 【26】这个要改一下
- 【27】input设置为readonly和disable有什么区别?
- 【28】谈谈对BFC的理解
- 【29】简述src与href的区别
- 【30】什么是外边距重叠?以及防止方法
- 【31】HTML5 Input 表单新增输入类型
- 【32】HTML5语义化标签有哪些
- 【33】html常见兼容性问题
- 【34】Doctype的作用?严格模式与混杂模式的区别?
- 【35】HTML与XHTML的区别?
- 【36】input有那些类型?
- 【37】 img的alt与title有何异同?strong与em的异同?
- 【38】px和em的区别是什么?你还了解那些单位?
- 【39】把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?
- 【40】什么是雪碧图?它作用是什么?
- Javascript
- 【01】简述ajax请求过程,以及注意事项。
- 【02】post和get的区别?
- 【03】简述jsonp跨域原理,以及你知道的其他跨域方法
- 【04】JSONP与JSON的区别
- 【05】谈谈对http和https的理解
- 【06】var let const 的区别是什么?
- 【07】简述“==”与“===”的区别?
- 【08】javascript各类型在转换为boolean式的规则?
- 【09】Object.creat()和new对象有什么区别?
- 【10】for in和Object.keys来遍历对象有什么区别?
- 【11】Object.assign()函数的作用及用法
- 【12】数组的常用方法有那些?
- 【13】js中内置 对象有哪些有哪些?
- 【14】控制台undefined和is not defined异常区别?
- 【15】JS中面向对象和面向过程的区别
- 【16】什么是脚本?
- 【17】cookies、sessionStorage和localStorage区别?
- 【18】谈一下你对面向对象的理解?
- 【19】什么是函数?
- 【20】正则验证,match()与test()函数的区别?
- 【21】什么是闭包?简述的优缺点
- 【22】Es6新特性有哪些?
- 【23】怎么判断一个object是否是数组(array)?
- 【24】函数声明和函数表达式的区别?
- 【25】this一般的指向,以及如何改变指向
- 【26】javascript的typeof返回哪些数据类型(和37重复了)
- 【27】列举IE和标准下有哪些兼容性的写法
- 【28】new操作符具体干了什么呢?
- 【29】什么是Json?
- 【30】js中的3种弹出式命令什么
- 【31】节点的种类有几种,分别是什么?
- 【32】Void(0)的作用是什么?
- 【33】箭头函数和普通函数的区别
- 【34】怎么获取对象的key值
- 【35】谈谈你对原型链的理解
- 【36】Javascript如何实现继承?
- 【37】typeof返回哪些数据类型
- 【38】创建函数的几种方式?
- 【39】js中同步和异步的区别
- 【40】事件绑定和普通事件有什么区别?
- 【41】documen.write和 innerHTML的区别?
- 【42】JS实现继承的6种方式
- 【43】什么是事件委派以及优缺点
- 【44】JS创建对象的几种方式?
- 【45】解释js垃圾回收机制和引起内存泄漏?
- 【46】DOM怎样添加、移除、移动、复制、创建和查找节点
- 【47】null和undefined的区别?
- 【48】正则常用符号代表什么?
- 【49】callee和caller的作用?
- 【50】如何阻止事件冒泡和默认事件?
- 【51】例举3种强制类型转换和2种隐式类型转换?
- 【52】JavaScript是一门什么样的语言,它有哪些特点?
- 【53】js延迟加载的方式有哪些?
- 【54】js作用域有那些
- 【55】同步和异步的区别?
- 【56】已知ID的Input输入框,希望获取这个输入框的输入值
- 【57】ajax请求的时候get 和post方式的区别
- 【58】eval()的作用
- 【59】如何用原生js给一个按钮绑定两个onclick事件?
- 【60】Javascript中的定时器有哪些?他们的区别及用法是什么?
- Node
- 【01】对nodejs的理解?
- 【02】import和require的区别
- 【03】Node.js的优点和缺点
- 框架及JS库
- 【01】jQuery如何实现事件委托?
- 【02】$(document).ready和window.onload的区别?
- 【03】v-if与v-show区别
- 【04】mvc和mvvm模式区别
- 【05】React早期创建组件的方式
- 【06】export与export default 的区别
- 【07】简述一下 Handlebars 的基本用法?
- React
- 【01】对React生命周期的理解
- 【02】React创建组件的三种方式及其区别是什么?
- 【03】react和vue有哪些不同,说说你对这两个框架的看法