JavaScript new运算符
1. 初识new
new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
function Car(make, model, year) {this.make = make;this.model = model;this.year = year;
}const car1 = new Car('Eagle', 'Talon TSi', 1993);console.log(car1.make);
// "Eagle"
2. new的实现
new
关键字会在这段代码中发挥什么作用呢?
- 第一步:创建一个空的简单JavaScript对象(即{});
- 第二步:为步骤1新创建的对象添加属性__proto__,将该属性链接至构造函数的原型对象 ;
- 第三步:将步骤1新创建的对象作为this的上下文 ;
- 第四步:如果该函数没有返回对象,则返回this。
我们结合代码来理解上文new Car
的过程:
//第一步:
var obj = {}
//第二步:
obj.__proto__ = Car.prototype
//第三步:
Car.call(obj,'Eagle', 'Talon TSi', 1993)
//第四步:
return obj
这里需要注意的是,此时的Car构造函数没有返回值,这也是我们推崇的情况,构造函数的目的是为了帮助用户快速构建对象,为了代码的可读性和可维护性,建议不要掺杂除构造作用外的代码,同样的,一般的功能函数也不要作为构造函数。
但是,如果此时的Car存在返回值呢?比如:
function Car(make, model, year) {this.make = make;this.model = model;this.year = year;return {make:'Benz',model:'Pickup Truck',year:1995}
}const car1 = new Car('Eagle', 'Talon TSi', 1993);console.log(car1);
输出:
{ make: 'Benz', model: 'Pickup Truck', year: 1995 }
这时候,因为构造函数主动返回了一个对象,所以覆盖了正常的对象创建步骤。注意: 这里必须返回一个对象才会覆盖,若返回一个简单变量(如字符串),就不会覆盖:
function Car(make, model, year) {this.make = make;this.model = model;this.year = year;return 'A new car'
}const car1 = new Car('Eagle', 'Talon TSi', 1993);console.log(car1);
输出:
Car { make: 'Eagle', model: 'Talon TSi', year: 1994 }
3. 增加属性
随着时间,之前的Car构造函数中仅有的三个属性已经不能满足当前的需求,比如我们需要增加一个color属性,表示这一辆车的颜色。
可以直接使用car1.color='red'
语句给car1增加color
属性:
car1.color = 'red'
console.log(car1);
输出:
Car { make: 'Eagle', model: 'Talon TSi', year: 1994, color: 'red' }
但是,如果我们需要给每一辆车都增加这一属性,该怎么做呢?
给每一辆车都按照这样的语句来添加属性?
这时候,我们可以使用Function.prototype
属性将color属性添加到该对象类型的定义之中。
Car.prototype.color = "default color"
console.log(car1.color);
4. 结语
关于JavaScript 对象的六种创建方式可以查看笔者的这一篇文章【草稿ing】。
JavaScript new运算符相关推荐
- (4)javascript的运算符以及运算符的优先级
运算符的使用方法 在javascript的程序中要完成各种各样的运算,是离不开运算符的. 在javascript中,按运算符类型可以分为算术运算符.赋值运算符.比较运算符.逻辑运算符.条件运算符等. ...
- JavaScript instanceof 运算符深入剖析
简介: 随着 web 的发展,越来越多的产品功能都放在前端进行实现,增强用户体验.而前端开发的主要语言则是 JavaScript.学好 JavaScript 对开发前端应用已经越来越重要.在开发复杂产 ...
- JavaScript instanceof 运算符深入剖析【转载】
http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/ instanceof 运算符简介 在 JavaScript 中, ...
- 前端研习录(20)——JavaScript三元运算符
前端研习录(20)--JavaScript三元运算符 版权声明 三元运算符 版权声明 本文原创作者:清风不渡 博客地址:https://blog.csdn.net/WXKKang 重拾前端记忆,记 ...
- javascript关系运算符与逻辑运算符
原文来自javascript关系运算符与逻辑运算符 一.关系运算符 用于进行比较的运算符称作为关系运算符:小于(<).大于(>).小于等于(<=).大于等于(>=).相等(== ...
- 09.JavaScript算术运算符(加、减、乘、除、幂、余)、自增、自减、缩写、位移
JavaScript算术运算符 章节目录 上一篇:<类型转换> 下一篇:<比较运算符> 运算符是数学计算中的概念,我们从小学就在学习的+.-.*./就是最基础的运算符. 运算符 ...
- JavaScript 扩展运算符
文章目录 扩展运算符 使用扩展运算符复制数组 使用扩展运算符克隆数组 带对象的扩展运算符 剩余参数 参考文档 在本教程中,您将借助示例了解 JavaScript 扩展运算符. 扩展运算 ...
- javaScript的运算符和if。。else语句
比较运算符: ==等于 ===全等 !=不等于 >大于 <小于 >=大于或者是等于 <=小于或者是等于 使用:可以在条件语句中使用比较运算符进行对值比较,然后根据结果采取行动 ...
- Javascript 补位运算符
看到一个题目~~3.14得到是3,一下子有点蒙,之前在Javascript中完全没有见过~这个运算符.经查才知道~是补位运算符,但是跟原码反码补码又有点不同(在反码这一块,不记正负),好吧,大学的东西 ...
- javascript 位运算符
前几天看到国外人在github总结的javascript的奇巧淫技(http://t.cn/herRcq),里面对位运算提到的很多,所以来科普一下javascript的位运算.于是找到了w3cscho ...
最新文章
- 替 ASP.NET 的 Table 控件換裝
- mycat mysql ha 方案_7、基于 HA 机制的 Mycat 高可用--mycat
- 关于JWT你要知道的都在这里
- 手机通讯录备份代码实现三
- python迭代对象有哪些_Python可迭代对象操作示例
- ARDUINO 入门学习第三课
- APP支付宝提现和微信提现之服务端接入
- 洛谷P1308 统计单词数
- 黑客帝国、乱雨纷飞效果
- 微信小程序-打开地图选择位置
- Freemarker提供了3种加载模板目录的方法
- vue笔记——本地应用
- 将应用程序设置可信任(在win10操作系统)
- 用css3 3d效果做一个立体盒子
- cmake:解决MSVC下/MT 编译paho.mqtt.c的问题
- 项目开发(质检督查)
- 基于conga实现RHCS简单部署
- Delphi下POS打印机,控制开钱箱,客显,顾客显示屏,小票打印机
- HDTUNE软件测试自学,HDTune Pro读取性能测试_DIY攒机-中关村在线
- springboot获取active_springboot 使用spring.profiles.active 区分不同环境下配置文件
热门文章
- WPS AI内测申请窍门;AI数字人最全工具盘点;AI超级个体必读书籍;产品国际化与本地化指南;生成式AI应用路线图 | ShowMeAI日报
- 人工智能与计算机视觉之间有何差异?
- 基于Vue+Springboot的MOBA类游戏攻略分享平台【毕业设计,源码,论文】
- python中functools_python functools模块
- pfSense book之流量管理
- Yii2.0 游客访问限制
- 攻防世界 reverse 新手题wp (第二周)
- ToB人,你真的看懂《流浪地球》了么?
- 主要用于科学计算机的是什么,早期计算机主要用于什么
- 腾讯云ELB负载均衡(blance)