前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 继承相关概念究级备忘录

JavaScript 继承相关概念究级备忘录

作者头像
逆葵
发布2019-04-25 11:09:24
3110
发布2019-04-25 11:09:24
举报
文章被收录于专栏:FECodingFECoding

1. 基础

代码语言:javascript
复制
function Parent (name) {
    this.name = name;
}

var son = new Parent('chris');


// 实例的 contructor 指向实例的构造函数
console.log(son.constructor === Parent); // true

// instanceof 用于验证实例与原型对象的关系
console.log(son instanceof Parent);      // true

// isPrototypeOf 用于验证实例与 prototype 对象的关系
console.log(Parent.prototype.isPrototypeOf(son))  // true

// 实例的 __proto__ 指向其构造函数的 prototype 对象
console.log(son.__ptoto__ === Parent.prototype);  // true

// __proto__ 是每个对象都有的属性,prototype 属性只有函数才有

2. 构造函数继承

假设有如下两个类

代码语言:javascript
复制
function Person () {
    this.type = 'human';
}

function Parent (name) {
    this.name = name;
}

想要实现 Parent 继承 Person,常见的有以下四种方式:

代码语言:javascript
复制
/* 1. 构造函数绑定 */

function Parent (name){
    Person.apply(this, arguments);
    this.name = name;
}

/* 2. prototype 模式 */
Parent.prototype = new Person();

// prototype 对象的 contructor 属性应该指向构造函数,
// 上一步使得 Parent.prototype.contructor === Person
// 此后将使 son.prototype === Parent.prototype === Person,造成继承链紊乱,因此需要修正
Parent.prototype.contructor = Parent;

/* 3. 直接继承 prototype */

// 优点:效率高,不用创建实例,节省内存
// 缺点:任何对 Parent.prototype 的修改将直接影响 Person.prototype
// 缺点:Person.prototype.contructor 也被修改(=== Parent)

Parent.prototype = Person.prototype;
Parent.prototype.contructor = Parent;

/* 4. 利用空对象作为中介 */

var F = function () {};

F.prototype = Person.prototype;
Parent.prototype = new F();
Parent.prototype.constructor = Parent;

3. 非构造函数继承

假设有以下两个对象

代码语言:javascript
复制
var father = {
    lastname: 'paul'
};

var son = {
    height: 180
};

需要实现 son 对 father 的继承,有以下几种方式:

代码语言:javascript
复制
/* 1. 空函数作中介 */
function object (o) {
    var F = function () {};
    F.prototype = o;
    
    return new F();
}

var son = object(father);
son.height = 180;


/* 2. 浅拷贝、深拷贝*/
// 逐个将父对象的属性拷贝至子对象

4. End

最后,送上知乎用户 @doris 的一图流作为结尾:

js-oo
js-oo
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 基础
  • 2. 构造函数继承
  • 3. 非构造函数继承
  • 4. End
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档