谈谈JS new运算符到底做了些什么
2022/3/26 6:25:23
本文主要是介绍谈谈JS new运算符到底做了些什么,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、关于new
在面向对象的语言中,new关键字总是用于实例化一个对象
在JavaScript中,作为一个运算符,new常与构造函数一起使用
let map = new Set() function Apple(size,color){ this.size = size this.color = color } let apple = new Apple('huge','red')
二、new与构造函数
既然new与构造函数紧密联系,不妨从构造函数的角度来探讨一下new究竟做了什么
2.1 构造函数的this指向
new的作用之一:创建实例的构造函数绑定与构造函数的this绑定
众所周知,对于一个普通函数,它的this一般指向函数的调用者
但是当它与new作用,它的this便会指向被创造出来的实例
function Apple(size,color){ console.log(this) this.size = size this.color = color } Apple('huge', 'red') // window let apple = new Apple('huge', 'red') // Apple {} console.log(apple.constructor) // [Function: Apple]
2.2 构造函数的返回值
new的作用之二:为构造函数指定一个默认非undefined的返回值
函数都拥有返回值,当一个函数没有return时,它默认返回undefined
实例可以看作是构造函数的返回值
在实例化过程中,如果为构造函数指定了引用类型的返回值,那么返回该引用类型;如果构造函数没有返回值,或者说指定了基本类型的返回值,那么它返回this(新创建的实例)
function Apple(size,color){ this.size = size this.color = color // case 1 return { self:true } // case 2 return 'self' // case 3 return } console.log(new Apple('huge', 'red')) // case1 {self:true} case2、3 Apple {}
2.3 构造函数与实例的继承关系
new的作用之三:将实例的原型链指向构造函数的原型
实例由构造函数创建,实例的原型链指向构造函数的原型,因此实例拥有构造函数原型上的属性
一般来说,一个实例的原型链是这样的:apple.proto --> Apple.Prototype --> Object.Prototype --> null
function Apple(size) { this.size = size } Apple.prototype.height = '100mm' Apple.width = '80mm' let apple = new Apple('huge') console.log( apple.size, // huge apple.height, // 100mm apple.width // undefined ) Apple.prototype.width = '70mm' console.log(apple.width) // 70mm console.log(Object.getPrototypeOf(apple) === Apple.prototype) // true
三、总结: new运算符究竟做了什么
经过上面的叙述之后,对于“new运算符究竟做了什么”已经有了答案
JavaScript在通过new创建实例的过程中,一共做了以下事情:
- 创建一个空对象 instance
- 绑定构造函数的this,使其指向instance,执行构造函数为instance设置属性
- 将instance的原型链指向构造函数的原型
- 如果构造函数指定了引用类型的返回值ret,那么返回ret,否则返回instance
四、后续: 如何实现new运算符
查看另一篇博客 实现JS new运算符
这篇关于谈谈JS new运算符到底做了些什么的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础
- 2024-12-25Vue3入门指南:快速搭建你的第一个Vue3项目
- 2024-12-25JS基础知识入门教程
- 2024-12-25React基础知识详解:从入门到初级应用
- 2024-12-25Vue3基础知识详解与实战指南
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用