JS 构造函数&原型&原型链

2020-05-01 259 阅读2分钟

什么是构造函数？

简单来说构造函数就是专门构造对象的函数，我们可以通过 new 运算符创建一个实例对象。

function Person(name,age){
    this.name = name;
    this.age = age;
}
// 使用 new 运算符创建实例
let person = new Person('Hello',20);  // { name: 'Hello' , age: 20 }

有一些书写规范需要记一下

构造函数的首字母一定要是大写（业内规定，便于理解）
构造函数创建的实例对象的首字母一律小写（业内规定，便于理解）

构造函数创建实例时，`new` 运算符做了哪些工作？

new 运算符做了 4 件事

在构造函数 Person 内部的最顶层创建了一个空对象
让 Person 中的 this 指向这个空对象，并把执行 Person 的函数体
将对象中的 constructor 指向 Person 构造函数，并将对象的 __proto__ 指向 Person.prototype
return this 返回创建的对象，这个对象就是实例对象

// Person 的经历
function Person(name,age){
    // 创建一个 this 空对象
    var this = new Object();
    // 执行代码体
    this.name = name;
    this.age = age;
    // 此时实例对象中已经有了 name 和 age 两个属性，现在这个步骤是改变这个对象的 `contructor` 和 `__proto__`
    this.constructor = Person;
    this.__proto__ = Person.prototype  // 这一步是绑定原型。多个原型串成的链条叫做原型链
    // 最后一步，返回 this 对象
    return this;
}

什么是原型？

原型的本质是一个对象，他的作用是一个模板的效果，我们创建的所有对象都是以这个最初的模板为原型(Object.prototype)，另外原型在对象和函数中所代表的属性名是不一样的

对象中，__proto__ 属性指向的是创建的他的原型

let obj = new Object();
console.log( obj.__proto__ === Object.prototype );  // true

函数中，prototype 属性指向的是创建他的原型

function Person(name,age){
    this.name = name;
    this.age = age;
}
let person = new Person('Hello',20);  // { name: 'Hello' , age: 20 }

console.log( Person.prototype === person.__proto__ );  // true

除了所有对象的最终原型是 Object.prototype 之外，还有一些特别的原型

Function.prototype
Array.prototype
Number.prototype
String.prototype
Boolean.prototype

构造函数与原型与实例之间的关系

什么是原型链？

当一个对象的 __proto__ 链接到一个原型，并且这个原型的 __proto__ 又链接到另一个原型，这三者构成的链条关系就被称作原型链

学习笔记，以后补充