js中原型和原型鏈

1.原型： 在JavaScript 中，對象被表現爲prototype 。

　　原型其實一直存在於咱們接觸過的任何一個對象。

2.

Tip：在函數對象中也存在__proto__屬性，可是查看函數對象的原型仍是要使用prototype 。

JavaScript 在建立對象的時候，不管是普通對象仍是函數對象，都存在一個屬性__proto__，

JavaScript 的原型鏈 和繼承主要依賴於__proto__

咱們能夠經過__proto__ 和 prototype的結合 查看原型的每個層級，也就是原型鏈。

Tip：在js中，原型和原型鏈是實現繼承的一種模型。

X.a();

當咱們調用一個對象的屬性或者方法的時候，系統會查詢這個對象，若是這個對象中不存在這個方法，就會向上一層查詢，若是上一層仍是沒有這個屬性或者方法，就繼續沿着原型鏈去找，一直找到原型的最頂端，object 的上一層 null纔會中止。

3.簡單的繼承

 

        var a = {
            x : 1,
            y : 2
        }
        var b = {
            z : 3,
            w : 4
        }
        b.__proto__ = a;//b的原型是a，b繼承a
        console.log(b);
        console.log(b.x);    

View Code

 

4.create建立對象的一種方式

var a = Object.create({x:1});
        console.log(a.__proto__);//{x:1}
        var b = Object.create(null);
        console.log(b);//Object No Properties
        var e = "hello";
        console.log(e.__proto__);//String {length: 0, [[PrimitiveValue]]: ""}
        var dd = Object.create(Object.prototype);
        console.log(dd);
        console.log(dd.__proto__);

View Code

5.constructor 屬性返回對建立此對象的數組函數的引用。

var a  = 10;
        console.log(a.constructor);//function Number
        var b = "hello";
        console.log(b.constructor);//function String

6.繼承

/*
        
        需求：讓咱們新建立對象a 可以同時擁有 Show對象和 SHow對象原型的方法和屬性。
        TIp：須要明白：js的原型是能夠更改的。
        實現思路： 咱們要經過更改原型的方式來實現繼承。
        Why？ 由於js中的機制是：對象會從原型無條件的繼承屬性和方法。
        咱們纔去將a對象的原型從新賦值爲實例化後的show對象。
         */
        function Show(){
            this.getName = function (name){
                alert(name);//爸爸
            }
        }
        Show.prototype.getAge = function (age){
            alert(age);//爺爺
        }
        // console.log(Show);
        // console.log(Show.prototype);
        var a = {};//乾兒子  object  function Obejct
        a.__proto__ = new Show();//若是採用這種方式去實現繼承的話，會發現，
        //a原型的構造函數和自己的構造函數被破壞了，那麼這種狀況是不利用開發的
        //容易出現不可預知的錯誤，因此，咱們在下一步，要將a原型的構造函數改成a自己也就是obejct。
        // console.log(a.constructor);    
        a.__proto__.constructor = a;  
        // a.getName('dav');
        // a.getAge(10);
        console.log(a);
        console.log(a.__proto__);
        console.log(a.__proto__.constructor);
        // a.__proto__ = Show.prototype;
        // a.getAge(2);
        // a.getName('dav');

 7.繼承

/*
        
        m 對象  n對象  k對象
        須要k對象擁有m對象和 n對象的屬性和方法
         */
        function m ()
        {
            this.showM = function (){
                alert('this is M')
            }
        }
        function n()
        {
            this.showN = function (){
                alert('this is N');
            }
        }
        function k()
        {

        }

        n.prototype = new m();
        n.prototype.constructor = n;

        k.prototype = new n();
        k.prototype.constructor = k;

        var boo = new k();
        boo.showM();
        boo.showN();

View Code

8.跳過繼承過來的屬性或方法

var a = {
            x:1,
            y:2
        }
        var b ={
            a :3,
            c:4
        }
        b.__proto__ = a;
        console.log(b);
        for(var i in b)
        {
            if(!b.hasOwnProperty(i)){//可以將繼承過來的屬性或者方法跳過，不去遍歷出來
                continue;
            }
            else
            {
                document.write(b[i] + '<br/>')
            }
        }

View Code