实例化的时候我们都是这样:
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>