建構函式與原型鏈和麵向物件的學習(二)
阿新 • • 發佈:2018-11-11
這節對原型鏈的學習
最下面有所有的會用到的完整js程式碼
講解
每一個函式都有一個屬性叫做prototype,指向一個物件(不是函式就沒有這個屬性),當這個建構函式被new的時候,他的每一個例項的__proto__屬性,也指向這個物件
__proto__是神器,有原鏈查詢功能,當new出來的物件本身沒有這個屬性的時候,系統會沿著__proto__去尋找他的原型身上沒有的這個屬性
相當於:console.log(People.prototype === xiaomio.__proto__); //true function People2(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } People2.prototype = { //每一個建構函式都有一個屬性叫做prototype,指向一個物件。 "teacher : "考拉", "zhishang" : 180, "gongzi" : 30000 } var xiaomio2 = new People2("小明",19,"男"); console.log(xiaomio2.teacher); //考拉 (當這個函式被new的時候,他的每一個例項的__proto__屬性,也指向這個物件,所以當原來的物件沒有這個屬性的時候系統會沿著__proto__去尋找他的原型身上沒有的這個屬性)
那麼他們prototype值向的物件的同一個所以不管是xiaomio2還是xiaoho2他們指向的物件都是同一個所以是true
var xiaomio2 = new People2("小明",19,"男"); var xiaoho2 = new People2("小紅",12,"女"); console.log(xiaoho2.teacher === xiaomio2.teacher); //true
小例子
function People3(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
People3.prototype = Math;
var xiaomio3 = new People3("小明",19,"男");
console.log(xiaomio3.random()); //0.30685614374013936
解析:
當People3的prototype指向了Math的屬性的時候,那麼people3 new出來的物件也可以通過__proto__來獲得Math的屬性
所以解決上文例題一中如何可以讓他們的函式都相同,就是把函式放到prototype物件中(原型上定義方法),這樣new出來的物件都值想同一個prototype從而達到了她們的物件相同
function People4(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
People4.prototype = {
sayHello : function(){
alert("你好我是"+this.name+"我的年紀為"+this.age+"我的性別是"+this.sex);
}
}
var xiaomio4 = new People4("小明",19,"男");
var xiaoho4 = new People4("小紅",12,"女");
console.log(xiaoho4.sayHello === xiaomio4.sayHello); //true
影象的理解
指向相同的物件堆內地址也相同所以為true
所有程式碼:
function People(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.sayHello = function(){
alert("你好我是"+this.name+"我的年紀為"+this.age+"我的性別是"+this.sex);
}
}
var xiaomio = new People("小明",19,"男");
var xiaoho = new People("小紅",12,"女");
console.log(xiaoho); //People {name: "小紅", age: 12, sex: "女", sayHello: ƒ}
console.log(xiaomio); //People {name: "小明", age: 19, sex: "男", sayHello: ƒ}
if(xiaoho.sayHello === xiaomio.sayHello ){
console.log("相等");
}else{
console.log("不相等") //不相等
}
console.log(People.prototype === xiaomio.__proto__); //true
//這裡說明了雖然他們的物件的方法值相同,但他們不全等(和建構函式的原理一樣,值一樣但位置不同所以不全等引用型別的比較和基本型別的比較的區別就是在這裡)
//那如何可以讓他們想等?下面就是原型鏈
/*********
*案例二
**********/
function People2(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
People2.prototype = {
"teacher": "考拉",
"zhishang" : 180,
"gongzi" : 30000
}
var xiaomio2 = new People2("小明",19,"男");
var xiaoho2 = new People2("小紅",12,"女");
console.log(xiaoho2.teacher === xiaomio2.teacher); //true
console.log(xiaomio2.teacher); //考拉
/*********
*小例子
**********/
function People3(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
People3.prototype = Math;
var xiaomio3 = new People3("小明",19,"男");
console.log(xiaomio3.random()); //0.30685614374013936
/*********
*解決的例子
**********/
function People4(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
People4.prototype = {
sayHello : function(){
alert("你好我是"+this.name+"我的年紀為"+this.age+"我的性別是"+this.sex);
}
}
var xiaomio4 = new People4("小明",19,"男");
var xiaoho4 = new People4("小紅",12,"女");
console.log(xiaoho4.sayHello === xiaomio4.sayHello); //true