资讯专栏INFORMATION COLUMN

彻底理解Javascript中的原型链与继承

ziwenxie / 1614人阅读

摘要:在节中,我们学习到了通过构造函数创建对象的三个重要步骤,其中的一步是把构造函数的对象设置为创建对象的原型。利用而不是直接用创建一个实例对象的目的是,减少一次调用父构造函数的执行。

JavaScript语言不像面向对象的编程语言中有类的概念,所以也就没有类之间直接的继承,JavaScript中只有对象,使用函数模拟类,基于对象之间的原型链来实现继承关系,
ES6的语法中新增了class关键字,但也只是语法糖,内部还是通过函数和原型链来对类和继承进行实现。

1 原型链 1.1 原型链定义

JavaScript对象上都有一个内部指针[[Prototype]],指向它的原型对象,而原型对象的内部指针[[Prototype]]也指向它的原型对象,直到原型对象为null,这样形成的链条就称为原型链。

这样在访问对象的属性时,会现在自己的属性中查找,如果不存在则会到上一层原型对象中查找。

注意:
根据 ECMAScript 标准,someObject.[[Prototype]] 符号是用于指派 someObject 的原型。这个等同于 JavaScript 的 proto 属性(现已弃用)。从 ECMAScript 6 开始, [[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()访问器来访问。

例如:

var obj2 = {
    height: 170
}
var obj3 = {
    name: "obj3"
}
Object.setPrototypeOf(obj3, obj2);
console.log(obj3.height); // 170
var isproto = Object.getPrototypeOf(obj3) === obj2;
console.log(isproto); // true
1.2 不同方法创建对象与生成原型链 1.2.1 使用 Object.create 创建对象

ECMAScript 5 中引入了一个新方法:Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数。

例如:

var a = {a: 1};
// a ---> Object.prototype ---> null
 
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继承而来)
 
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
 
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype
1.2.2 使用构造函数创建对象

在 JavaScript 中,构造函数其实就是一个普通的函数,一般函数名首字母大写。当使用 new 操作符 来作用这个函数时,它就可以被称为构造方法(构造函数)。
例如:

function Person (name, age) {
    this.name = name;
    this.age = age;
}
 
Person.prototype = {
    sayName: function () {
        console.log(this.name);
    }
}
var person1 = new Person("yangyiliang", 23);
person1.sayName(); // yangyiliang

使用构造函数创建对象,经历了如下三个关键步骤:

var temp = {}; //1  创建空对象
Person.call(temp, "yangyiliang", 23); //2  以空对象为this执行构造函数
Object.setPrototypeOf(temp, Person.prototype); //3  将构造函数的prototype 设置为空对象的原型
return temp;
1.2.3 使用字面量方法创建对象

使用字面量方法创建的对象,根据对象的类型,他们的原型都会指向相应JavaScript内置构造函数的prototype,和直接使用内置构造函数创建对象生成的原型链相同,例如:

var o = {a: 1};
 
// o这个对象继承了Object.prototype上面的所有属性
// 所以可以这样使用 o.hasOwnProperty("a").
// hasOwnProperty 是Object.prototype的自身属性。
// Object.prototype的原型为null。
// 原型链如下:
// o ---> Object.prototype ---> null
 
var a = ["yo", "whadup", "?"];
 
// 数组都继承于Array.prototype
// (indexOf, forEach等方法都是从它继承而来).
// 原型链如下:
// a ---> Array.prototype ---> Object.prototype ---> null
 
function f(){
  return 2;
}
 
// 函数都继承于Function.prototype
// (call, bind等方法都是从它继承而来):
// f ---> Function.prototype ---> Object.prototype ---> null
2 继承

在面向对象的语言当中,继承关系应该指的是父类和子类之间的关系,子类继承父类的属性和方法,在JavaScript当中是父构造函数和子构造函数之间的关系。

类本身是对象的抽象形式,类的使用价值最后也是在于通过它能够创建对象,
所以子类能够继承父类的属性和方法的意义,就是通过子类创建出来的对象能够继承通过父类创建出来的对象的属性和方法。

而这种对象之间的继承关系,就是通过原型链实现。

在1.2.2节中,我们学习到了通过构造函数创建对象的三个重要步骤,其中的一步是把构造函数的prototype对象设置为创建对象的原型。

因此我们将父类的实例对象作为子类的prototype即能够达到继承的目的,如下图所示:

继承的实现

function Person (name, age) {
    this.name = name;
    this.age = age
}
 
Person.prototype.sayName = function () {
    console.log("my name is " + this.name);
}
 
function Student (name, age, school) {
    Person.call(this, name, age);
    this.school = school;
}
 
Student.prototype = Object.create(Person.prototype);
 
Student.prototype.saySchool = function () {
    console.log("my school is " + this.school);
}

上面代码实现的继承,遵循了几个原则:

1、因为构造函数创建的对象将公用同一个原型,所以将每个对象独有的属性写在构造函数中,将对象之间可以公用的方法写在构造函数的prototype中,也就是对象的原型中

2、子构造函数继承父构造函数做了两个地方的工作,一是在子构造函数中利用call,调用父构造函数的方法,二是利用Object.create方法创建一个以父构造函数的prototype为原型的对象。

利用Object.create而不是直接用new 创建一个实例对象的目的是,减少一次调用父构造函数的执行。

3、先通过prototype属性指向父构造函数的实例,然后再向prototype添加想要放在原型上的方法。

最后上一张js高级程序设计第三版中的一张源于原型链继承的图

利用class实现继承

下面利用ES6引入的新语法糖,class、extends关键字对上述实现继承的代码进行改写:

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
 
    sayName () {
        console.log("my name is " + this.name);
    }
}
 
class Student extends Person {
    constructor (name, age, school) {
        super(name, age);
        this.school = school;
    }
 
    saySchool () {
        console.log("my school is " + this.school);
    }
}

class里的constructor 对应原来的构造函数

class里面的其他方法都是写在原来构造函数的prototype中的

子类直接通过extends 关键字进行继承

子类中可以通过super来调用父类中的方法

本文部分内容来自 https://developer.mozilla.org...

后续

function A() {
}
//函数默认会有一个prototype对象并且具有constructor属性指向他本身

var a = new A()

a instanceof A


function A() {
}

function B() {
}

var proto = {}

B.prototype = proto

A.prototype = proto
var a = new A()
a instanceof B //true
a instanceof Object //true

instanceof  是遍历a 的原型链 寻找是否有和 B.prototype  是同一个对象的__proto__  如果找到就为true

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86638.html

相关文章

  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0
  • Js基础知识(二) - 原型链与继承精彩的讲解

    摘要:有了原型链,就有了继承,继承就是一个对象像继承遗产一样继承从它的构造函数中获得一些属性的访问权。这里其实就是一个原型链与继承的典型例子,开发中可能构造函数复杂一点,属性定义的多一些,但是原理都是一样的。 作用域、原型链、继承与闭包详解 注意:本章讲的是在es6之前的原型链与继承。es6引入了类的概念,只是在写法上有所不同,原理是一样的。 几个面试常问的几个问题,你是否知道 insta...

    mrcode 评论0 收藏0
  • Js基础知识(二) - 原型链与继承精彩的讲解

    摘要:有了原型链,就有了继承,继承就是一个对象像继承遗产一样继承从它的构造函数中获得一些属性的访问权。这里其实就是一个原型链与继承的典型例子,开发中可能构造函数复杂一点,属性定义的多一些,但是原理都是一样的。 作用域、原型链、继承与闭包详解 注意:本章讲的是在es6之前的原型链与继承。es6引入了类的概念,只是在写法上有所不同,原理是一样的。 几个面试常问的几个问题,你是否知道 insta...

    lingdududu 评论0 收藏0
  • JavaScript系列(四) - 收藏集 - 掘金

    摘要:函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言,然而,近几年,函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此,...

    cfanr 评论0 收藏0

发表评论

0条评论

ziwenxie

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<