关于Js中new操作符的作用详解


Posted in Javascript onFebruary 21, 2021

前言

Js是当今时代最常用的代码操作语言,其中new操作符尤为常见。对于很多代码小白来说,并不清楚new在Js中扮演着怎样的角色,具体是做什么用,干了什么。本文从new操作符的作用着手,简单介绍new操作符相关知识。

关于Js中new操作符的作用详解

什么是new?

众所周知,在JS中,new的作用是通过构造函数来创建一个实例对象。

像下面这样:(和普通函数不一样,当函数用作构造函数时,首字母一般要大写,以作区分。)

function Foo(name) {
  this.name = name;
}
console.log("new Foo('mm')的类型:",typeof new Foo('mm')); // object
console.log("Foo的类型:",typeof Foo); // function

创建了一个空对象

var obj=new Object();

在Js代码中,new操作符的主要作用是产生对象。通过new创建空对象,为创建对象打基底。

设置原型链

obj.__proto__= Func.prototype;

JS中在利用new操作符建好基底后,就开始下一步的Js代码操作,设置原型链。new通过构造函数创建出的实例可以访问到构造函数原型链中的属性,换言之,通过new操作符,原型链链接了实例和构建函数。

(改变this指向)让Func中的this指向obj,并执行Func的函数体。

var result =Func.call(obj);

一般情况下,在Js代码组中,出现this时,构造函数内部是正常工作,但当通过new操作符改变this指向后,所出现的返回值会被正常的返回出去。

判断Func的返回值类型:如果是值类型,返回obj。如果是引用类型,就返回这个引用类型的对象。

if (typeof(result) == "object"){
  func=result;
}
else{
  func=obj;
}

从上述一组new操作符代码中可看出,new还可用来判断Func的返回值类型。如果返回值是值类型,则正常返回。如果是引用类型,就返回到引用类型的对象。

以上四点是new操作符在Js代码中的主要作用,对于Js代码小白希望可以有帮助。

总结

到此这篇关于关于Js中new操作符作用的文章就介绍到这了,更多相关Js new操作符作用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
JavaScript 绘制饼图的示例
Feb 19 #Javascript
JavaScript 判断浏览器是否是IE
Feb 19 #Javascript
原生JavaScript实现进度条
Feb 19 #Javascript
原生JavaScript实现换肤
Feb 19 #Javascript
基于vue的video播放器的实现示例
Feb 19 #Vue.js
You might like
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
JavaScript File分段上传
2016/03/10 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
python 多线程应用介绍
2012/12/19 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
使用python实现画AR模型时序图
2019/11/20 Python
python输出pdf文档的实例
2020/02/13 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
数据库基础的一些面试题
2012/02/25 面试题
个人事迹材料怎么写
2014/12/30 职场文书
颐和园的导游词
2015/01/30 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
MySQL修炼之联结与集合浅析
2021/10/05 MySQL