关于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 相关文章推荐
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
AngularJS Controller作用域
Jan 09 Javascript
js css自定义分页效果
Feb 24 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 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
收集的php编写大型网站问题集
2007/03/06 PHP
stripos函数知识点实例分享
2019/02/11 PHP
php的扩展写法总结
2019/05/14 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
新页面打开实际尺寸的图片
2006/08/25 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
解析js如何获取css样式
2016/12/11 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python中的super用法详解
2015/05/28 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
论文指导教师评语
2014/04/28 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android