JavaScript對(duì)象-原型與繼承

原型

原型基礎(chǔ)概念

JavaScript有很多對(duì)象悠汽，但是對(duì)象與對(duì)象之間沒有聯(lián)系婚肆，我們需要通過一個(gè)機(jī)制讓這些對(duì)象聯(lián)系起來，實(shí)現(xiàn)更加強(qiáng)大的功能抗愁，這個(gè)機(jī)制就是原型

原型的使用方法：

每定義一個(gè)函數(shù)，就隨之有一個(gè)對(duì)象存在呵晚，函數(shù)通過prototype屬性指向該對(duì)象蜘腌。這個(gè)對(duì)象稱之為原型對(duì)象。
示例：

function Person(){}
console.log(Person.prototype);//輸出結(jié)構(gòu)為Object

繼承

繼承的方式：

1.使用原型對(duì)象實(shí)現(xiàn)繼承
通過原型繼承使一個(gè)對(duì)象從另一個(gè)對(duì)象中獲取本來沒有的屬性的方法
示例：

function Person(name){
    this.name=name;
}
Person.prototype.sayHello=function(){
    console.log("hello"+this.name);
    return "";
}
var p1=new Person("k");
var p2=new Person("jok");
console.log(p1.sayHello());
console.log(p2.sayHello());

2.替換原型對(duì)象實(shí)現(xiàn)繼承
將構(gòu)造函數(shù)的原型對(duì)象替換成另一個(gè)對(duì)象
示例：

function Person(){}
Person.prototype={
    sayHello:function(){
        console.log("Hello World");
    }
}
var p=new Person();
p.sayHello();

3.利用Object.create()實(shí)現(xiàn)繼承
ES5中新增的一種繼承實(shí)現(xiàn)方式
示例：

var obj={
    sayHello:function(){
        console.log("我是一個(gè)帶有sayHello的對(duì)象");
        return "";//如果函數(shù)沒有return會(huì)出現(xiàn)一個(gè)undefined
    }
}
var newObj=Object.create(obj);
console.log(newObj.sayHello());

4.混入繼承
將一個(gè)對(duì)象的成員賦值給另一個(gè)對(duì)象
示例：

//方法一（較簡單）：
var o1={};
var o2={name:"jok"};
o1.name=o2.name;
console.log(o1.name);

//方法二（較復(fù)雜）：
function extend(o1,o2){
    for(var k in o2){
        o1[k]=o2[k];
    }
}
var o1={name:"jok"};
var o2={age:16,sex:"男"};
extend(o1,o2);
console.log(o1.age);

靜態(tài)成員與動(dòng)態(tài)成員

靜態(tài)成員定義

靜態(tài)成員是指構(gòu)造函數(shù)直接使用的成員

靜態(tài)成員和實(shí)例成員的區(qū)別

靜態(tài)成員使用構(gòu)造函數(shù)名可以直接訪問饵隙，但是實(shí)例成員必須使用對(duì)象來訪問
示例：

function Person(){
    this.name='jok';
    this.age=18;
}//實(shí)例成員
Person.addr="China";
Person.msg=function(){
    console.log(this.addr);
    return "";
}//靜態(tài)成員
//訪問靜態(tài)成員
console.log(Person.msg());
//訪問動(dòng)態(tài)成員
console.log(Person.name);//錯(cuò)誤撮珠，返回結(jié)果為Person，無法直接訪問name中的值
var obj=new Person();
console.log(obj.name);

屬性搜索原則

當(dāng)對(duì)象訪問一個(gè)屬性時(shí)金矛，首先會(huì)在當(dāng)前對(duì)象中尋找芯急，如果沒有勺届，會(huì)在原型對(duì)象中查找，如果到最后都沒有找到娶耍，返回undefined免姿，這就是屬性搜索原則
示例：

function Person(){
    this.name="jok";
}
Person.prototype.name="jack";
var obj=new Person();
console.log(obj.name);

說明：上述代碼輸出的結(jié)果為jok，如果把this.name="jok";這行賦值代碼注釋掉榕酒，輸出結(jié)果就變?yōu)閖ack胚膊，如果把Person.prototype.name="jack";這行原型賦值的代碼也注釋掉，則輸出undefined

原型鏈

前言：

JavaScript沒有子類和父類的概念想鹰，也沒有類和示例的區(qū)分紊婉，全靠原型鏈來實(shí)現(xiàn)繼承
JavaScript是使用構(gòu)造函數(shù)生成實(shí)例對(duì)象，這種方式有一個(gè)缺點(diǎn)辑舷，就是每一個(gè)實(shí)例對(duì)象喻犁，都有自己的屬性和方法的副本，不僅無法做到數(shù)據(jù)共享何缓，對(duì)資源也是會(huì)造成很大的浪費(fèi)
設(shè)計(jì)者引入了prototype屬性株汉，這個(gè)屬性里包含了一個(gè)對(duì)象（prototype對(duì)象），所有實(shí)例對(duì)象需要共享的屬性和方法歌殃，都放在這個(gè)對(duì)象中，不需要共享的屬性和方法放在構(gòu)造函數(shù)中

構(gòu)造函數(shù)蝙云，原型對(duì)象氓皱，實(shí)例對(duì)象的關(guān)系

構(gòu)造函數(shù)的prototype屬性就是其原型對(duì)象
原型對(duì)象的constructor屬性又指回了構(gòu)造函數(shù)
示例：

function Person(){};
console.log(Person.prototype.constructor===Person);//原型對(duì)象指回了構(gòu)造函數(shù)，輸出為true

實(shí)例對(duì)象原本不具有constructor屬性勃刨，但是繼承自構(gòu)造函數(shù)波材，所以也就有了，實(shí)例對(duì)象的construction也指回了構(gòu)造函數(shù)
示例：

function Person(){};
console.log(new Person().constructor===Person);//實(shí)例對(duì)象指回了構(gòu)造函數(shù)身隐，輸出為true
console.log(new Person().constructor.prototype===Person.prototype);//實(shí)例對(duì)象轉(zhuǎn)化為原型對(duì)象

函數(shù)本質(zhì)上就是對(duì)象廷区，自定義函數(shù)和內(nèi)置構(gòu)造函數(shù)都是Function函數(shù)，而Function函數(shù)的構(gòu)造函數(shù)就是本身
示例：

function Person(){};
console.log(Person.constructor===Function);//因?yàn)樽远x函數(shù)出自Function贾铝，所以輸出結(jié)果為true
console.log(String.constructor===Function);//因?yàn)閮?nèi)置函數(shù)也出自Function隙轻，所以輸出結(jié)果也為true
console.log(Function.constructor===Function);//Function構(gòu)造函數(shù)為它本身，所以輸出true

原型鏈定義

對(duì)象有原型對(duì)象垢揩，原型對(duì)象又有原型對(duì)象玖绿，這就形成了一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)，稱之為原型鏈

image.png

prototype和 proto

prototype稱之為顯式原型叁巨，__ proto__稱之為隱式原型
所有對(duì)象中都有一個(gè)__proto __屬性
__proto __屬性是專門用來查看實(shí)例對(duì)象的原型對(duì)象
函數(shù)對(duì)象（自定義普通函數(shù)斑匪，構(gòu)造函數(shù)，內(nèi)置構(gòu)造函數(shù)）同時(shí)擁有prototype屬性和__proto __屬性
由于構(gòu)造函數(shù)锋勺，原型對(duì)象蚀瘸，實(shí)例對(duì)象之間可以互相轉(zhuǎn)換狡蝶，形成了一個(gè)閉環(huán)，所以沒辦法訪問到原型對(duì)象的原型對(duì)象贮勃。所以有了一個(gè)隱式原型__proto __贪惹，指向了構(gòu)造函數(shù)的原型對(duì)象
構(gòu)造函數(shù)的原型對(duì)象，繼承自O(shè)bject的原型對(duì)象衙猪，而Object的原型對(duì)象是null
示例：

function A(){}
var a=new A();
console.log(a.__proto__);//首先指向的是A的原型對(duì)象馍乙，也就是A
console.log(a.__proto__.__proto__);//繼續(xù)往上找一層就是object，所以輸出結(jié)果為object
console.log(a.__proto__.__proto__.__proto__);//object再往上找就是null垫释，所以輸出為null

注意：

普通對(duì)象沒有prototype屬性
如果用prototype屬性來查看實(shí)例對(duì)象的原型對(duì)象可能會(huì)出錯(cuò)
實(shí)例對(duì)象.constructor.prototype并不一定訪問的是構(gòu)造函數(shù)的原型對(duì)象
示例：

function A(){}
function B(){}
A.prototype=new B();
var a=new A();
console.log(a.constructor.prototype===A.prototype);//因?yàn)闃?gòu)造函數(shù)A的原型指向了B的實(shí)例所以返回false丝格，此時(shí)A的原型===B的原型
console,log(a.__proto__===A.prototype);//返回true

使用__proto __屬性訪問到的一定是實(shí)際構(gòu)造函數(shù)的原型對(duì)象