原型

定義： 原型是function物件的一個屬性，它定義了建構函式製造出的物件的公共祖先。通過該建構函式產生的物件，可以繼承該原型的屬性和方法。原型也是物件。

用一張圖簡單解釋一下定義。

1. 每個函式上面都有一個原型屬性(prototype)，這個屬性會指向建構函式的原型物件(Person.prototype)
2. 每個函式的原型物件(Person.protorype)預設都有一個constructor屬性指向建構函式本身(Person)
3. 每個例項都有一個隱式原型(__proto__)指向建構函式的原型物件(Person.prototype)
4. 每個原型物件也有隱式原型(__proto__)

// 建構函式
function Person() {
  this.LastName = 'zhang'
}
// Person.prototype  --- 原型 (自帶的，當定義了建構函式，它就孕育而生了)
// Person.prototype = {} --- 原型物件 是祖先
Person.prototype.name = 'xiaoming';
var person = new Person()
var person1 = new Person()
console.log(person.name); // xiaoming (它自己沒有，就會到原型(祖先)上去找)
console.log(person1.LastName); // zhang (它自己有，就會取自身的)
 

constructor

function Person() {
}
var person = new Person()
console.log(person.constructor) // function Person() {} 
// person自己沒有constructor,所以繼承至原型

Person.prototype:

圖中淺紫色的都是自帶的

function Person() {
}
function Car() {
}
Person.prototype.constructor = Car; // 改變constructor
var person = new Person()
console.log(person.constructor) // function Car() {}
 

proto

// __proto__
function Person() {
    
}
Person.prototype.name = 'zhangsan'
var person = new Person()
console.log(person.__proto__)

new

New的過程

1. 宣告一箇中間物件
2. 將中間物件的原型指向建構函式的原型
3. 將建構函式的this指向中間物件
4. 返回中間物件，即例項物件

function DNew() {
  // var obj = {}; // var obj = new Object() 建立一個空物件 
  // var obj = Object.create(null);
  Constructor = [].shift.call(arguments); // 獲取第一個引數即建構函式
  // obj.__proto__ = Constructor.prototype; 
  var obj = Object.create(Constructor.prototype);
  var result = Constructor.apply(obj, arguments); 
  return typeof result === 'object' ? result || obj : obj; // 返回物件
}
 

在通過new 一個例項物件時：
function Person() {
  var this = {
    __proto__ : Person.prototype
  }
}

person.__proto__ 與 Person.prototype是指向同一個記憶體地址，這也就是 為什麼例項沒有屬性或方法會到原型上去查詢

function Person() {
    
}
Person.prototype.name = 'zhangsan'
var person = new Person()
Person.prototype.name = 'lisi'
console.log(person.name) // ???

function Person() {
    
}
Person.prototype.name = 'zhangsan'
var person = new Person()
Person.prototype = {
  name : 'lisi'
}
console.log(person.name) // ???

原型鏈

先扔一張圖：

Person.prototype.__proto__ : Object.prototype

例子：

function Grand() {

}
Grand.prototype.lastName = "zhang"
var grand = new Grand()

function Father() {

}
Father.prototype = grand // Father的原型指向grand物件
var father = new Father()

function Son() {

}
Son.prototype = father // Son的原型指向father
var son = new Son()

上圖中紅線表示的就是原型鏈了

Object.create()

// Object.create(原型)
var obj = {name: 'zhang',age: 23}
var obj1 = Object.create(obj)

Person.prototype.name = 'zhang'
function Person() {}
var person = Object.create(Person.prototype)

Object.create(null),null就是一個空物件，沒有原型。這也是·typeof null == 'object'的原因

toString

undefined和null沒有toString()

true.toString()

'abc'.toString()

var num = 123
num.toString()
// 123.toString() 試一試會怎樣

var obj = {}
obj.toString() // "[object Object]"

toString來自哪？？

var num = 123
// num.toString(); --> new Number(num).toString()
// Number重寫 toString
Number.prototype.toString = function() {}

// Number.prototype.__proto__ = Object.prototype

function Person(){}
Person.prototype.toString = function () {
  return '重寫toString'
}
var person = new Person()
person.toString() // '重寫toString'

// Object.prototype.toString
// Number.prototype.toString
// Array.prototype.toString
// Boolean.prototype.toString
// String.prototype.toString

toString隱藏功能：判斷變數、物件的型別

call/apply

function Person(name, age) {
  this.name = name
  this.age = age
}
var person = new Person('zhang', 23)
var obj = {}
Person.call(obj,'wang',30) // this指向obj
// obj = {age:30,name:"wang"}

call/apply不僅改變了this的指向，還會執行對應的方法

var cat = {
  name: '咪咪'
}
function beatTheMonster(){
  console.log(this.name);
}
beatTheMonster.call(cat);

// 1.call 改變了this的指向。改變到了cat上。
// 2.beatTheMonster函式/方法執行了
// 3.bind()，儲存了方法，並沒有直接呼叫它

最後

建立了一個前端學習交流群，感興趣的朋友，一起來嗨呀！