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 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
浅谈javascript回调函数
Dec 07 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 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
DSP接收机前端设想
2021/03/02 无线电
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python九九乘法表的实例
2017/09/26 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Django实现随机图形验证码的示例
2020/10/15 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
股东合作协议书
2014/04/14 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
学生保证书
2015/01/16 职场文书
护士辞职信怎么写
2015/02/27 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
Java版 简易五子棋小游戏
2022/05/04 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL