js中new 到底做了瓦特？？比较new、Object.create、Object.setPrototypeOf

最新推荐文章于 2024-05-01 21:01:22 发布

徐行莫停

最新推荐文章于 2024-05-01 21:01:22 发布

阅读量772

点赞数

分类专栏：面试题各种小知识点整理 JS基础学习文章标签： new Object.create Object.setPrototypeOf

本文链接：https://blog.csdn.net/qq_35765126/article/details/79353235

版权

面试题同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

各种小知识点整理

8 篇文章 0 订阅

订阅专栏

JS基础学习

5 篇文章 0 订阅

订阅专栏

实例化的时候我们都是这样：

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>

徐行莫停

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中new 到底做了瓦特？？比较new、Object.create、Object.setPrototypeOf

实例化的时候我们都是这样：var box=new BOX()那么new在中间有什么作用呢，new 先创建一个新对象b=new Object();将构造函数作用域赋给新变量 b.proto=BOX.prototype;执行构造函数中的代码（属性，方法什么的），this指向b如果BOX返回的是值类型，就直接返回b，若是引用类型，则不要b返回这个引用类型,这里开始不太懂，找到了...
复制链接

扫一扫