详解JavaScript原型与原型链

工厂方法与构造器方法对比

function person(firstName, lastName, age) {
 const person = {};
 person.firstName = firstName;
 person.lastName = lastName;
 person.age = age;
 return person;
}

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

new关键字的执行机制

const mike = new person('mike', 'grand', 23);

mike.__proto__	// Object.prototype

const jack = new Person('jack', 'grand', 23);

jack.__proto__	// Person.protytype这里的prototype指向Person的Prototype Object
jack.__proto__.__proto__	// Object.prototype

function Person(firstName, lastName, age) {
 // this = {};
 // this.__proto__ = Person.prototype;
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 // return this;
}

const bob = Person('bob', 'grand', 23);
bob	// undefined. 因为这里Person当作方法直接调用了且没有返回值
window.firstName	// bob. 函数内的this将指向全局作用域，导致意外操作

原型的定义与访问

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

Person.prototype === Person.prototype.constructor.prototype	// 指向Person的原型对象
Person.prototype.constructor === Person	// 指向Person方法对象

let bob = new Person("Bob", "Ross", 21);
Person.prototype === bob.__proto__;	// true

let alex = new Person("Alex", "Wang", 21);
Person.prototype === alex.__proto__;	// true
alex.__proto__ === bob.__proto__;	// true

原型链的查找规则

const obj = {};
console.log(obj);	// [object Object]	obj的toString()方法从Object的原型中查找到并使用

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 // 在Person.prototype上定义了toString覆写了Object.prototype上的toString
 Person.prototype.toString = function() {
  return `${this.firstName} It Is`;
 }
}

let bob = new Person("Bob", "Ross", 21);
let alex = new Person("Alex", "Wang", 21);
console.log(bob);	// Bob It Is
console.log(alex);	// Alex It Is