模擬js的new運算符的實現原理


模擬js的new運算符的實現原理函數

咱們知道,js裏有一種建立對象的方式是經過顯式的構造函數new出來一個實例化對象
可是 這個new運算符是怎麼實現的呢?this

先捋一遍new運算符的整個流程:
1: 建立一個新對象 它繼承自構造函數的prototype
2:構造函數被執行 執行的時候 相應的傳參會被傳入,同時綁定上下文(this)
3:若是構造函數返回了一個'對象' 那麼這個對象會取代整個new出來的結果。若是構造函數
    沒有返回對象,那麼new出來的結果爲步驟1建立的新對象
<script>
        function Tiger(){
            this.name='泰哥';
            this.work='eat meat';
        }
        Tiger.prototype.tiger_dance = function(){
            console.log('dancing~~~~~~!');
        }
        var tigers = new Tiger();
            console.log(tigers);
     </script>
![圖片描述][1]

接下來就手動實現一個new運算符:prototype

<script>
        var new2 = function(func){
            //建立一個空對象 並繼承構造函數的原型對象
            var o = Object.create(func.prototype);
            //執行構造函數func 並改變func的this爲o對象的
            var k = func.call(o);
            //判斷構造函數func執行完的結果是否是對象類型
            if(typeof k === 'object'){
                return k;
            }else{
                return o;
            }
        }

        function Funky(){
            this.name='泰哥';
            this.work='eat meat';
        }
        Funky.prototype.funky_dance = function(){
            console.log('dancing~~~~~~!');
        }
        var funkys = new2(Funky);
            console.log(funkys);
    </script>
![圖片描述][2]

能夠看到 Funky的實例化對象funkys 已經有了構造函數Funky自己的屬性而且也繼承了Funky原型鏈上的方法
而且 funkys.__proto__ === Funky.prototype
至此,咱們已經簡單的實現了new運算的功能 是否是蠻簡單~
相關文章
相關標籤/搜索