實例化的時候我們都是這樣:
var box=new BOX()
那麼new在中間有什麼作用呢,
- new 先創建一個新對象b=new Object();
- 將構造函數作用域賦給新變量 b.proto=BOX.prototype;
- 執行構造函數中的代碼(屬性,方法什麼的),this指向b
- 如果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>