想開(kāi)一個(gè)車，你不需要自己去造一個(gè)車，只需要一把鑰匙，車對(duì)于你來(lái)說(shuō)就是一個(gè)"對(duì)象"。
在JavaScript中的"對(duì)象", 具有屬性,當(dāng)屬性的值是一個(gè)函數(shù)時(shí),那么此屬性就是這個(gè)對(duì)象的方法.訪問(wèn)屬性的方式參考Object介紹

首先想到的是字面量創(chuàng)建對(duì)象,其次是創(chuàng)建一個(gè)對(duì)象實(shí)例,然后一次對(duì)對(duì)象屬性進(jìn)行賦值.但是無(wú)論這兩種那個(gè)方法都有個(gè)缺點(diǎn),當(dāng)需要重復(fù)創(chuàng)建大量相同的對(duì)象時(shí),產(chǎn)生大量代碼這是很不理想的,這時(shí)想到函數(shù)的一個(gè)功能就是講重復(fù)代碼進(jìn)行簡(jiǎn)化,以便多次使用,那么構(gòu)造函數(shù)形式創(chuàng)建多個(gè)對(duì)象方式就是理想的選擇了.

function outPut() {
    console.log("hello")
}

function Person (name,age) {
    this.name2 = name;
    this.age2 = age;
    this.sayName = function () {
        console.log("this.name2")
    };
}

var person2 = new person("Kangkang" , 20)

// 分別調(diào)用

這里有幾點(diǎn)需要注意,首先是這個(gè)this是誰(shuí)? new操作符有什么作用?

this指向的創(chuàng)建的實(shí)例,這里指的是 person2, 而new操作符可以創(chuàng)建一個(gè)對(duì)象實(shí)例.

創(chuàng)建一個(gè)新對(duì)象,

將構(gòu)造函數(shù)的作用域賦給新對(duì)象,此時(shí)this已經(jīng)指向新對(duì)象,操作this等同操作新對(duì)象

執(zhí)行構(gòu)造函數(shù)里的代碼

返回創(chuàng)建的新對(duì)象

使用instanceof 操作符,返回布爾值.

p1 instanceof Person;
p1 instanceof Object;

第二個(gè)檢測(cè),無(wú)論是自己創(chuàng)建的構(gòu)造函數(shù)對(duì)象還是字面量對(duì)象,均為true,因?yàn)樗麄兙^承自O(shè)bject. 對(duì)于某個(gè)構(gòu)造函數(shù)創(chuàng)建的實(shí)例當(dāng)其構(gòu)造函數(shù)的原型被改變后使用此操作符發(fā)現(xiàn)返回false ，原因在于在實(shí)例的原型鏈上構(gòu)造函數(shù)的原型是舊的對(duì)象，不是新的對(duì)象，自然也就不對(duì)了。instanceof-MDN

思路是將這個(gè)方法提到實(shí)例的外面去,如果是全局對(duì)象不就可以直接調(diào)用了嗎?可是全局函數(shù)對(duì)于封裝來(lái)說(shuō)可沒(méi)好處,所以原型模式也就有了用處.

原型是定義能夠被對(duì)象實(shí)例所使用的屬性和函數(shù)的一種方式.原型的屬性會(huì)變成實(shí)例的屬性.

這段話不容易理解.一點(diǎn)點(diǎn)分析,對(duì)象的原型屬性(prototype)指向的是一個(gè)對(duì)象,對(duì)象里存的屬性和方法在對(duì)象實(shí)例后(即構(gòu)造函數(shù)方法創(chuàng)建的新對(duì)象) 可以被實(shí)例對(duì)象訪問(wèn)使用.

function Person() {
  
}
Person.prototype.name = "Kangkang"
Person.prototype.age = 20
Person.prototype.sayName = function () {
  console.log(this.name)
}

var person1 = new Person()
person1.sayName() // "Kangkang"

var person2 = new Person()
person2.sayName() //"Kangkang"

console.log(person1.sayName == person2.sayName) //true

var person3 = new Person() 
person3.name = "Mary"
person3.sayName() //"Mary"

在函數(shù)創(chuàng)建的時(shí)候，prototype屬性就被創(chuàng)建出來(lái)了，通過(guò)構(gòu)造函數(shù)生成的實(shí)例在瀏覽器下支持一個(gè)屬性__proto__ 查看prototype（原型里的對(duì)象）

如圖所示
顯示的是當(dāng)一個(gè)實(shí)例在自己屬性中找不到相應(yīng)的方法或者屬性時(shí)往上一層尋找的情況。

檢測(cè)某個(gè)屬性屬于實(shí)例還是原型：

person1.hasOwnProperty("name") 當(dāng)這個(gè)屬性是實(shí)例的返回true，是原型的返回false

注意到在實(shí)例中重寫某個(gè)屬性會(huì)阻止訪問(wèn)原型中的這個(gè)屬性，可是不會(huì)影響到原型中的屬性。

多帶帶操作的in操作符

使用這個(gè)操作符可以檢測(cè)某個(gè)屬性是否可以通過(guò)對(duì)象訪問(wèn)，這也就指的是無(wú)論這個(gè)屬性是實(shí)例中的還是原型中的，要知道實(shí)例可以通過(guò) __proto__ 訪問(wèn)，由上圖可知

"name" in Person1 可以訪問(wèn)返回true，否則返回false

這個(gè)操作符可以和上面的hasOwnperty() 結(jié)合使用判斷某個(gè)屬性是否存在且存在于哪里。

由上面介紹可知，通過(guò)Person.prototype.name = "kangkang"
這種方法甚是繁瑣，多個(gè)屬性、方法將會(huì)導(dǎo)致反復(fù)的輸入，所以對(duì)象字面量的書寫方式就能很好解決這個(gè)問(wèn)題。

function Person () {
    
} 

Person.prototype = {
    name : "Kangkang",
    age: 20,
    job: "student",
    sayName = function() {
        console.log(name)
    }
}

謹(jǐn)慎在初始化原型后再將其改變?yōu)榱硗庖粋€(gè)對(duì)象

function Person () {
    
} 

var friend = new Person()
Person.prototype.sayHi = function() {
    console.log("hi")
}

friend.sayHI();

// 在創(chuàng)建對(duì)象后再對(duì)原型添加方法依然有效

下面這種情況：

function Person () {
    
} 

var friend = new Person()

Person.prototype = {
    name : "Kangkang",
    age: 20,
    job: "student",
    friends: ["xiaojun","xiaoming"],
    sayName : function() {
        console.log(name)
    }
    
friend.sayName();// error

這種情況相當(dāng)于在原型初始化后又重新生成對(duì)象并且賦值，而原來(lái)的實(shí)例是指向初始化時(shí)的對(duì)象地址，故無(wú)法訪問(wèn)新的原型里的屬性和方法.

如下程序：

function Person () {
    
} 

Person.prototype = {
    name : "Kangkang",
    age: 20,
    job: "student",
    friends: ["xiaojun","xiaoming"],
    sayName : function() {
        console.log(name)
    }
}

var person6 = new Person()
var person7 = new Person()

// person6.name  = "Mary"

// console.log(person6.name)
// console.log(person7.name)

// person6.sayName = function() {
//   console.log("hi")
// }
person6.friends.push("xiaohong")
console.log(person6.friends)
console.log(person7.friends)

console.log(person6.sayName == person7.sayName)

由上面的代碼得出:

當(dāng)對(duì)原型中基本類型值屬性和方法在實(shí)例中重新添加會(huì)阻止尋找到原型中的屬性和方法，當(dāng)用delete 操作符刪除后依然可以找到原型中的屬性和方法，也就是說(shuō)在實(shí)例中重定義這兩種情況不會(huì)影響原型中的屬性和方法，但是如果原型中的屬性對(duì)應(yīng)的值是引用類型，由于引用類型的特性，實(shí)例得到了相同的這個(gè)屬性的地址，又由于原型是實(shí)例公用的方法，所以當(dāng)任一實(shí)例操作這個(gè)引用值屬性時(shí)都會(huì)影響到其他這個(gè)對(duì)象的實(shí)例。所以組合使用構(gòu)造函數(shù)和原型也就很好解決這個(gè)問(wèn)題。

function Person (name, age, job) {
  this.name = name
  this.age = age
  this.job = job
  this.friends = ["kangkang","mary"]
}
Person.prototype = {
  constructor : Person,
  sayName : function () {
    console.log(this.name)
  }
}

var person1 = new Person("xiaojun",22,"student")
var person2 = new Person("xiaowang", 21, "student")

person1.friends.push("xiaozhang")

console.log(person1.friends) // ["kangkang", "mary", "xiaozhang"]
console.log(person2.friends) // ["kangkang", "mary"]
console.log(person1.friends === person2.friends) //false
console.log(person1.sayName === person2.sayName) //true

初學(xué)筆記，個(gè)人記錄備忘，如有謬誤，歡迎指正。