你知道几种继承方式?(结尾有彩蛋)
栏目: JavaScript · 发布时间: 7年前
内容简介:首先准备一个构造函数(后几个皆以此为例)此时在控制台中查看S里是这样的优点: 使用简单,好理解
(转载请注明出处)(๑•ᴗ•๑) 复制代码
首先准备一个构造函数(后几个皆以此为例)
function Person() {
this.name = 'person',
this.age = 18
}
Person.prototype.eat = function () {}
复制代码
1原型继承
function Student() {}
Student.prototype = new Person
var s = new Student
复制代码
此时在控制台中查看S里是这样的
{
__proto__: Student.prototype {
name: 'person',
age: 18,
__proto__: Person.prototype {
eat: function () {},
__proto__: Object.prototype
}
}
}
复制代码
优点: 使用简单,好理解
缺点: 原型链多了一层,并且这一层没什么用
2借用构造函数继承
function Student() {
Person.call(this)
}
var s = new Student
复制代码
此时在控制台中查看S里是这样的
{
name: 'person',
age: 18,
__proto__: Student.prototype {
constructor: Student,
__proto__: Object.prototype
}
}
复制代码
优点: 直接把属性变成自己的了
缺点: 没有父类原型上的东西
3组合继承
function Student() {
Person.call(this)
}
Student.prototype = new Person
}
var s = new Student
复制代码
此时在控制台中查看S里是这样的
{
name: 'person',
age: 18,
__proto__: new Person {
name: 'person',
age: 18,
__proto__: Person.prototype {
eat: function () {},
constructor: Person,
__proto__: Object.prototype
}
}
}
复制代码
优点: 属性继承来变成自己的,原型也继承过来了
缺点: 第一层原型没用,继承的原型多走一步
4拷贝继承
function Student() {
var p = new Person
for (var key in p) {
Student.prototype[key] = p[key]
}
}
var s = new Student
复制代码
此时在控制台中查看S里是这样的
{
__proto__: Student.prototype {
name: 'person',
age: 18,
eat: function () {},
constructor: Student,
__proto__: Object.prototype
}
}
复制代码
优点: 属性和方法都继承来放在我自己的原型上了
缺点: for in 循环,相当消耗性能的一个东西
5寄生继承
function Student() {
this.gender = '男'
var p = new Person
return p
}
Student.prototype.fn = function () {}
var s = new Student
复制代码
这里很明显,此时直接得到的是 Person 的实例, this.gender 和 fn() 不会存在在s中
优点: 完美的继承了属性和方法
缺点: 根本没有自己的东西了
6寄生式组合继承1
function Student() {
Person.call(this)
}
Student.prototype.fn = function () {}
Student.prototype = Person.prototype
var s = new Student
复制代码
此时在控制台中查看S里是这样的
{
name: 'person',
age: 18,
__proto__: Person.prototype {
eat: function () {},
constructor: Person,
__proto__: Object.prototype
}
}
复制代码
优点:原型的东西不需要多走一步
缺点: 没有自己的原型
7寄生式组合继承2
function Student() {
Person.call(this)
}
(function () {
function Abc() {}
Abc.prototype = Person.prototype
Student.prototype = new Abc
})()
var s = new Student
复制代码
此时在控制台中查看S里是这样的
{
name: 'person',
age: 18,
__proto__: new Abc {
__proto__: Person.prototype {
eat: function () {}
}
}
}
复制代码
优点: 属性继承来是自己的,方法也继承来了,组合式继承的中间那个环节多余的属性没有了
缺点: 就是多了一个 空环,导致我访问继承的方法的时候要多走一步
8混搭式继承
function Student() {
Person.call(this)
}
(function () {
var obj = Person.prototype
for (var key in obj) {
Student.prototype[key] = obj[key]
}
})()
var s = new Student
复制代码
此时在控制台中查看S里是这样的
{
name: 'person',
age: 18,
__proto__: Student.prototype {
constructor: Student,
eat: function () {},
__proto__: Object.prototype
}
}
复制代码
优点: 属性原型都有了,没有多余的空环, constructor 直接指向自己
缺点: for in 循环。然后就没有缺点~~~(因为是自创的hhh)
复联四你看了吗?被剧透了吗-。-好气哟 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
百度SEO一本通
潘坚、李迅 / 电子工业出版社 / 2015-6 / 59.00元
《百度SEO一本通》通过浅显易懂的叙述方式,以及大量的图示,详细介绍了SEO的关键技术要点,对于搜索引擎优化中重要的关键词优化、链接优化,以及百度推广中的推广技巧都进行了详细的介绍。 《百度SEO一本通》共分为11章,首先让大家了解SEO存在的原因,然后对网页、网站、空间和程序与SEO的关系展开了细节上的讨论,最后几章深入介绍了百度推广的相关概念、设置、技巧和实操,让读者可以轻松上手操作,易......一起来看看 《百度SEO一本通》 这本书的介绍吧!