2021-06-03 10:52:41 +08:00

2.3 KiB
Raw Blame History

原型链和原型继承

在学习原型和原型链之前 我们先来复习一下 通过构造函数来创建对象的方式

构造函数

任何函数都可以做为构造函数使用 构造函数和普通函数的区别主要在于 调用的时候的差异

普通函数:

    function create(){
        this.role="admin"
    }
    create()
    

构造函数:

    function create(){
        this.role="admin"
    }
    var juese=new create()

此处的new 也属于运算符的一种 作用是创建一个用户定义的对象类型或具有构造函数的内置对象的实例

  • new 操作符的过程 new 关键字会进行如下的操作:

    1. 创建一个空的简单JavaScript对象即{}
    2.链接该对象设置该对象的constructor到另一个对象 
    
    1. 将步骤1新创建的对象作为this的上下文
    2. 如果该函数没有返回对象则返回this。
  • 分析 new foo() 的执行过程

    1. 一个继承自 Foo.prototype 的新对象被创建。
    2. 使用指定的参数调用构造函数 Foo并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()也就是没有指定参数列表Foo 不带任何参数调用的情况。 3.由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象则使用步骤1创建的对象。一般情况下构造函数不返回值但是用户可以选择主动返回对象来覆盖正常的对象创建步骤

接下来我们把上面创建的对象打印一下看看会出现什么结果

image-20210513165237126

然后我们会发现在我们定义的role属性下面多了一个__proto__ 属性 这个__proto__属性指的就是我们当前对象的原型

原型对象

无论什么时候只要创建一个新函数就会根据一组特定的规则为该函数创建一个prototype属性这个属性指向函数的原型对象。普通对象没有 prototype但有 __proto__ 属性。

function Person() {

}
Person.prototype.name = 'Perty';
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
delete person.name
console.log(person.name) // Perty