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

前言

Js是当今时代最常用的代码操作语言，其中new操作符尤为常见。对于很多代码小白来说，并不清楚new在Js中扮演着怎样的角色，具体是做什么用，干了什么。本文从new操作符的作用着手，简单介绍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操作符作用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS重学系列之聊聊new操作符

    new操作符的基本过程: 1.创建一个新的空对象. 2.将构造函数的作用域赋给它(即this指向它). 3.新对象增加构造函数的基本方法和属性. 4.返回新对象 上面的过程大家应该都熟悉,本文是重学 JS 系列的第一篇文章,写这个系列的初衷也是为了夯实自己的 JS 基础.既然是重学,肯定不会从零开始介绍一个知识点,如有遇到不会的内容请自行查找资料. new 的作用 我们先来通过两个例子来了解 new 的作用 function Test(name) { this.name = name } Tes

  • 详解JavaScript中new操作符的解析和实现

    前言 new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数. new 运算符的运行过程 new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的).new 操作符的执行大概有以下几个步骤: 创建一个新的空对象 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 proto

  • JS使用new操作符创建对象的方法分析

    JS使用new操作符创建对象的方法分析

    本文实例讲述了JS使用new操作符创建对象的方法.分享给大家供大家参考,具体如下: 在编写js代码时,我们有时会需要使用函数来模拟java中的类,并用它来产生对象,在定义了一个构造函数之后我们需要使用new操作符来调用调用函数才能得到我们想要的对象.例如: <script> function Constructor(name){ this.name = name } var person1 = Constructor("张三");//undefined var person

  • 用方法封装javascript的new操作符(一)

    先看个例子: 复制代码 代码如下: var Class = { create : function () { return function () { this.initialize.apply(this, arguments); } } } var A = Class.create(); A.prototype = { initialize:function(){ //todo } test:"abc" } var a = new A(); 这是很多jser构建类和实例化对象的过程,

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

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

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

    前言 Js是当今时代最常用的代码操作语言,其中new操作符尤为常见.对于很多代码小白来说,并不清楚new在Js中扮演着怎样的角色,具体是做什么用,干了什么.本文从new操作符的作用着手,简单介绍new操作符相关知识. 什么是new? 众所周知,在JS中,new的作用是通过构造函数来创建一个实例对象. 像下面这样:(和普通函数不一样,当函数用作构造函数时,首字母一般要大写,以作区分.) function Foo(name) { this.name = name; } console.log("ne

  • package.json中homepage属性的作用详解

    Package.json 属性说明 name - 包名. version - 包的版本号. description - 包的描述. homepage - 包的官网 url . author - 包的作者姓名. contributors - 包的其他贡献者姓名. dependencies - 依赖包列表.如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下. repository - 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上.

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • Node.Js中实现端口重用原理详解

    本文介绍了Node.Js中实现端口重用原理详解,分享给大家,具体如下: 起源,从官方实例中看多进程共用端口 const cluster = require('cluster'); const http = require('http'); const numCPUs = require('os').cpus().length; if (cluster.isMaster) { console.log(`Master ${process.pid} is running`); for (let i =

  • Java中反射机制和作用详解

    前言 很多刚学Java反射的同学可能对反射技术一头雾水,为什么要学习反射,学习反射有什么作用,不用反射,通过new也能创建用户对象. 那么接下来大师就带你们了解一下反射是什么,为什么要学习反射? 下面我们首先通过一个实例来说明反射的好处: 方法1.不用反射技术,创建用户对象,调用sayHello方法 1.1 我们首先创建一个User类 package com.dashi; /** * Author:Java大师 * User对象,包含用户的id和姓名以及sayHello方法 */ public

  • js中Object.create实例用法详解

    1.用Object.create()方法创建新对象,并使用现有对象提供新对象的proto. 2.提供两个参数,第一个是新创建的原型对象,第二个是为新创建的对象添加属性的对象. 实例 // father 对象 let father = { name: 'father', friend: ['abby', 'bob'] } // 生成新实例对象 child1 let child1 = Object.create(father) // 更改值类型属性 child1.name = '修改了name' c

  • JS中自定义事件与观察者模式详解

    目录 一.前言 二.观察者模式优缺点 三.代码实现 四.DOM自定义事件API 一.前言 观察者模式 也称发布-订阅模式 . 模型-视图模式 .当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知依赖它的对象.观察者模式属于行为型模式. 观察者模式: 类似我们在微信平台订阅了公众号 , 当它有新的文章发表后,就会推送给我们所有订阅的人. 我们作为订阅者不必每次都去查看这个公众号有没有新文章发布,公众号作为发布者会在合适时间通知我们

  • vue 中的 render 函数作用详解

    render 函数作用 vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了.建议配合文档阅读,本文也是根据文档加上自己的理解. 注:本文代码都是在单文件组件中编写.代码地址 render 函数作用 render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数. 官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几.具体代码可以看文档.

  • Angular.js中控制器之间的传值详解

    前言 每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件 另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.set

  • js中 javascript:void(0) 用法详解

    javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a> 这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here</

随机推荐