关于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 相关文章推荐
文本域中换行符的替换示例
Mar 04 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery大于号(>)选择器的作用解释
2015/01/13 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python调用命令行进度条的方法
2015/05/05 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python字符串下标与切片及使用方法
2020/02/13 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
婚前协议书
2014/04/15 职场文书
小学六年级学生评语
2014/04/22 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
校车司机安全责任书
2015/05/11 职场文书
用Python实现屏幕截图详解
2022/01/22 Python