new操作中发生了什么?

更新时间:2023-06-09 10:53:18 阅读: 评论:0

new操作中发⽣了什么?
new操作中发⽣了什么?
⽐较直观的感觉,当我们new⼀个构造函数,得到的实例继承了构造器的构造属性(this.name这些)以及原型上的属性。
在《JavaScript模式》这本书中,new的过程说的⽐较直⽩,当我们new⼀个构造器,主要有三步:
• 创建⼀个空对象,将它的引⽤赋给 this,继承函数的原型。
• 通过 this 将属性和⽅法添加⾄这个对象
• 最后返回 this 指向的新对象,也就是实例(如果没有⼿动返回其他的对象)motto
我们改写上⾯的例⼦,⼤概就是这样:
// ES5构造函数功夫熊猫2 台词
let Parent = function (name, age) {
兰迪英语如何//1.创建⼀个新对象,赋予this,这⼀步是隐性的,
// let this = {};
//2.给this指向的对象赋予构造属性
this.name = name;
this.age = age;
//3.如果没有⼿动返回对象,则默认返回this指向的这个对象,也是隐性的
// return this;
};
const child = new Parent();
这应该不难理解,你应该在⼯作中看过类似下述代码中的操作,将this赋予⼀个新的变量(例如that),最后返回这个变量:
// ES5构造函数
let Parent = function (name, age) {
let that = this;
that.name = name;
that.age = age;
return that;
};
const child = new Parent('听风是风', '26');
为什么要这么写呢?我在前⾯说this的创建与返回是隐性的,但在⼯作中为了让构造过程更易可见与更易维护,所以才有了上述使⽤that代替this,同时⼿动返回that的做法;这也验证了隐性的这两步确实是存在的。
但上述这个解释我觉得不够完美,它只描述了构造器属性是如何塞给实例,没说原型上的属性是如何给实例继承的。
我在winter⼤神的重学前端专栏中,看到了⽐较符合我⼼意的,同时也是符合原理的描述:
• 以构造器的prototype属性为原型,创建新对象;
• 将this(也就是上⼀句中的新对象)和调⽤参数传给构造器,执⾏;
• 如果构造器没有⼿动返回对象,则返回第⼀步创建的新对象,如果有,则舍弃掉第⼀步创建的新对象,返回⼿动return的对象。
到这⾥不管怎么说,你都应该⼤概知道了new过程中会新建对象,此对象会继承构造器的原型与原型上的属性,最后它会被作为实例返回这样⼀个过程。知道了原理,我们来⼿动实现⼀个简单的new⽅法。
⼆、实现⼀个简单的new⽅法
// 构造器函数
let Parent = function (name, age) {
this.name = name;
this.age = age;
};
Parent.prototype.sayName = function () {idole
console.log(this.name);
};
变暖的地球>sb是什么元素//⾃⼰定义的new⽅法
let newMethod = function (Parent, ...rest) {
// 1.以构造器的prototype属性为原型,创建新对象;
let child = ate(Parent.prototype);
// 2.将this和调⽤参数传给构造器执⾏
let result = Parent.apply(child, rest);
// 3.如果构造器没有⼿动返回对象,则返回第⼀步的对象
return typeof result  === 'object' ? result : child;down
};
new perspective//创建实例,将构造函数Parent与形参作为参数传⼊
const child = newMethod(Parent, 'echo', 26);
child.sayName() //'echo';
//最后检验,与使⽤new的效果相同
child instanceof Parent//true
child.hasOwnProperty('name')//true
child.hasOwnProperty('age')//true
child.hasOwnProperty('sayName')//fal
人与人相处之道
那么到这⾥就介绍完毕了。
new⼀个构造函数默认返回什么?调⽤构造函数不使⽤new能得到实例吗?如果你对这些有兴趣,可以阅读博主这篇博客:
proxyfox实例为什么能使⽤构造器prototype上的⽅法?继承之间的关系⼜是怎么样的?如果你对这些有兴趣,可以阅读博主这篇博客:
ES6新增的class类怎么⽤?与传统构造函数写法有哪些区别?如何快速上⼿class类?那你可以阅读博主这篇博客:
最后模拟实现new⽅法中,...rest是个什么参数?如果你对这个存疑,那怕是得了解下ES6中的取代arguments的rest参数,欢迎阅读这篇:

本文发布于:2023-06-09 10:53:18,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/910604.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:对象   返回   构造   属性
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图