js中new 到底做了瓦特??比較new、Object.create、Object.setPrototypeOf

實例化的時候我們都是這樣:

var box=new  BOX()

那麼new在中間有什麼作用呢,

  1. new 先創建一個新對象b=new Object();
  2. 將構造函數作用域賦給新變量 b.proto=BOX.prototype;
  3. 執行構造函數中的代碼(屬性,方法什麼的),this指向b
  4. 如果BOX返回的是值類型,就直接返回b,若是引用類型,則不要b返回這個引用類型,這裏開始不太懂,找到了一篇解釋的比較到位的文章給大家分享biu~

模擬一個new的過程

function mynew(fn){
var o=new Object();
o.proto=fn.prototype;
var result=fn.call(o);
if(typeof result==‘object’) return result;
else return o;
}
// 測試
var parent=function(){
name=‘lorry’;
}
parent.prototype.say=function(){alert(this.name);};
var child=mynew(parent);
child.name=‘hh’
child.say();

function mynew(fn){
var o=new Object();
var args=arguments.slice(1);
o.proto=fn.prototype;
var result=fn.call(o,args);
if(typeof result==‘object’) return result;
else return o;
}
// 測試
var parent=function(para){
name=para;
}
parent.prototype.say=function(){alert(this.name);};
var child=mynew(parent,‘lorry’);
child.say();

貼一下我測試的代碼

<body>
    <h3>new做了什麼</h3>
    <ul>
        <li>1.創建一個空對象obj</li>
        <li>2.obj.__proto__=OBJ.prototype</li>
        <li>3.執行OBJ的constructor() ,屬性,方法什麼的,this指向的是obj</li>
        <li>4.如果OBJ返回一個對象,就直接返回這個對象</li>
        <li>5.如果不是,則返回obj</li>
    </ul>
    <h3>
        object.create(),
    </h3>
    <ul>
        <li>1.創建一個新對象</li>
        <li>2.把新對象的_proto_關聯到指定對象的prototype</li>
    </ul>
    <h3>
        Object.setPrototypeOf(),
    </h3>
    <ul>
        <li>1.Object.setPrototypeOf(target.prototype,origin.prototype)</li>
    </ul>

</body>
<script>
    function Animal(){
        this.eat=function(){
            console.log('Animal eat');
        }
    }
    Animal.prototype.eats=function(){
        alert('Animal eats');
    }
    function Dog(){
        console.log('this',this);//===構造函數Dog {bark: ƒ}
        this.bark=function(){
            console.log('dog bark');
        }
    }
    Dog.prototype.wangwang=function(){
        alert('汪汪~~~');
    }
    console.log('Dog.prototype-->',Dog.prototype);
    Dog.prototype=new Animal();
    var hashiqi=new Dog();
    console.log('Dog.prototype.constructor-->',Dog.prototype.constructor);//Dog.prototype=new Animal();執行之後,發現他的constructor不指向自身了;所以需要我們手動修改
    console.log('Dog--->',Dog);//Dog.prototype=new Animal();執行之後,發現他的constructor不指向自身了;所以需要我們手動修改
    Dog.prototype.constructor=Dog;
    console.log('修改後Dog.prototype.constructor-->',Dog.prototype.constructor);
    console.log('hashiqi->>>',hashiqi);//===構造函數Dog {bark: ƒ}
    console.log('hashiqi.__proto__->>>',hashiqi.__proto__);//===Dog的原型對象
    console.log('Dog.prototype->>>',Dog.prototype);//Dog.prototype=new Animal;會重寫Dog的prototype,所以wangwang不存在

    hashiqi.bark()
    hashiqi.eats();//Dog.prototype=new Animal;會讓Dog擁有Animal的constructor、prototype裏的方法和屬性
    hashiqi.eat();//Dog.prototype=new Animal;會讓Dog擁有Animal的constructor、prototype裏的方法和屬性
    // hashiqi.wangwang();//is not a function

    console.log('使用object.create、Object.setPrototypeOf---------------------------');

    function Fish(){
        this.swim=function(){
            console.log('Fish swim');
        }
    }
    Fish.prototype=Object.create(Animal.prototype);
    // Object.setPrototypeOf(Fish.prototype,Animal.prototype);
    var fish=new Fish();
    console.log('Fish.prototype.eats-->',Fish.prototype.eats);
    console.log('fish.__proto__===Fish.prototype-->',fish.__proto__===Fish.prototype);
    
    fish.eats();
    fish.swim();
    fish.eat();//not a function 因爲Object.create沒有執行構造函數並修正this指向這一步,
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章