JS重学系列之聊聊new操作符


Posted in Javascript onMarch 04, 2019

new操作符的基本过程:

1.创建一个新的空对象。

2.将构造函数的作用域赋给它(即this指向它)。

3.新对象增加构造函数的基本方法和属性。

4.返回新对象

上面的过程大家应该都熟悉,本文是重学 JS 系列的第一篇文章,写这个系列的初衷也是为了夯实自己的 JS 基础。既然是重学,肯定不会从零开始介绍一个知识点,如有遇到不会的内容请自行查找资料。

new 的作用

我们先来通过两个例子来了解 new 的作用

function Test(name) {
 this.name = name
}
Test.prototype.sayName = function () {
 console.log(this.name)
}
const t = new Test('yck')
console.log(t.name) // 'yck'
t.sayName() // 'yck'

从上面一个例子中我们可以得出这些结论:

  • new 通过构造函数 Test 创建出来的实例可以访问到构造函数中的属性
  • new 通过构造函数 Test 创建出来的实例可以访问到构造函数原型链中的属性,也就是说通过 new 操作符,实例与构造函数通过原型链连接了起来

但是当下的构造函数 Test 并没有显式 return 任何值(默认返回 undefined),如果我们让它返回值会发生什么事情呢?

function Test(name) {
 this.name = name
 return 1
}
const t = new Test('yck')
console.log(t.name) // 'yck'

虽然上述例子中的构造函数中返回了 1,但是这个返回值并没有任何的用处,得到的结果还是和之前的例子完全一样。

那么通过这个例子,我们又可以得出一个结论:

  • 构造函数如果返回原始值(虽然例子中只有返回了 1,但是你可以试试其他的原始值,结果还是一样的),那么这个返回值毫无意义

试完了返回原始值,我们再来试试返回对象会发生什么事情吧

function Test(name) {
 this.name = name
 console.log(this) // Test { name: 'yck' }
 return { age: 26 }
}
const t = new Test('yck')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'

通过这个例子我们可以发现,虽然构造函数内部的 this 还是依旧正常工作的,但是当返回值为对象时,这个返回值就会被正常的返回出去。

那么通过这个例子,我们再次得出了一个结论:

  • 构造函数如果返回值为对象,那么这个返回值会被正常使用

这两个例子告诉了我们一点,构造函数尽量不要返回值。因为返回原始值不会生效,返回对象会导致 new 操作符没有作用。

通过以上几个例子,相信大家也大致了解了 new 操作符的作用了,接下来我们就来尝试自己实现 new 操作符。

自己实现 new 操作符

首先我们再来回顾下 new 操作符的几个作用

  • new 操作符会返回一个对象,所以我们需要在内部创建一个对象
  • 这个对象,也就是构造函数中的 this,可以访问到挂载在 this 上的任意属性
  • 这个对象可以访问到构造函数原型上的属性,所以需要将对象与构造函数链接起来
  • 返回原始值需要忽略,返回对象需要正常处理

回顾了这些作用,我们就可以着手来实现功能了

function create(Con, ...args) {
 let obj = {}
 Object.setPrototypeOf(obj, Con.prototype)
 let result = Con.apply(obj, args)
 return result instanceof Object ? result : obj
}

这就是一个完整的实现代码,我们通过以下几个步骤实现了它:

  • 首先函数接受不定量的参数,第一个参数为构造函数,接下来的参数被构造函数使用
  • 然后内部创建一个空对象 obj
  • 因为 obj 对象需要访问到构造函数原型链上的属性,所以我们通过 setPrototypeOf 将两者联系起来。这段代码等同于 obj.__proto__ = Con.prototype
  • 将 obj 绑定到构造函数上,并且传入剩余的参数
  • 判断构造函数返回值是否为对象,如果为对象就使用构造函数返回的值,否则使用 obj,这样就实现了忽略构造函数返回的原始值

接下来我们来使用下该函数,看看行为是否和 new 操作符一致

function Test(name, age) {
 this.name = name
 this.age = age
}
Test.prototype.sayName = function () {
 console.log(this.name)
}
const a = create(Test, 'yck', 26)
console.log(a.name) // 'yck'
console.log(a.age) // 26
a.sayName() // 'yck'

虽然实现代码只有寥寥几行,但是结果很完美

最后

我们通过这篇文章重学了 new 操作符,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
在Vue中使用HOC模式的实现
Aug 23 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
ES10 特性的完整指南小结
Mar 04 #Javascript
node.js使用express框架进行文件上传详解
Mar 03 #Javascript
微信小程序新手教程之启动页的重要性
Mar 03 #Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 #Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 #Javascript
JS+php后台实现文件上传功能详解
Mar 02 #Javascript
You might like
php 小乘法表实现代码
2009/07/16 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Python内置数据类型详解
2014/08/18 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
营销与策划个人求职信
2013/09/22 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
优秀团队获奖感言
2014/02/19 职场文书
2014信息公开实施方案
2014/02/22 职场文书
向领导表决心的话
2014/03/11 职场文书
模具专业求职信
2014/06/26 职场文书
信用卡工资证明格式
2014/09/13 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
初中毕业生感言
2015/07/31 职场文书
安全伴我行主题班会
2015/08/13 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP