首页 / JAVASCRIPT / new操作符的详细用法介绍

new操作符的详细用法介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了new操作符的详细用法介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10620字，纯文字阅读大概需要16分钟。

内容图文

本篇文章给大家带来的内容是关于new操作符的详细用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

相信很多才接触前端的小伙伴甚至工作几年的前端小伙伴对new这个操作符的了解还停留在一知半解的地步，比较模糊。

就比如前不久接触到一个入职两年的前端小伙伴，他告诉我new是用来创建对象的，无可厚非，可能很多人都会这么答！

那这么答到底是错很是对呢？

下面我们全面来讨论一下这个问题：

我们要拿到一个对象，有很多方式，其中最常见的一种便是对象字面量：

var obj = {}

但是从语法上来看，这就是一个赋值语句，是把对面字面量赋值给了obj这个变量（这样说或许不是很准确，其实这里是得到了一个对象的实例！！）

很多时候，我们说要创建一个对象，很多小伙伴双手一摸键盘，啪啪几下就敲出了这句代码。

上面说了，这句话其实只是得到了一个对象的实例，那这句代码到底还能不能和创建对象画上等号呢？我们继续往下看。

要拿到一个对象的实例，还有一种和对象字面量等价的做法就是构造函数：

var obj = new Object()

这句代码一敲出来，相信小伙伴们对刚才我说的obj只是一个实例对象没有异议了吧！那很多小伙伴又会问了：这不就是new了一个新对象出来嘛！

没错，这确实是new了一个新对象出来，因为javascript之中，万物解释对象，obj是一个对象，而且是通过new运算符得到的，所以说很多小伙伴就肯定的说：new就是用来创建对象的！

这就不难解释很多人把创建对象和实例化对象混为一谈!!

我们在换个思路看看：既然js一切皆为对象，那为什么还需要创建对象呢？本身就是对象，我们何来创建一说？那我们可不可以把这是一种继承呢？

说了这么多，相信不少伙伴已经看晕了，但是我们的目的就是一个：理清new是来做继承的而不是所谓的创建对象！！

那继承得到的实例对象有什么特点呢？

访问构造函数里面的属性
访问原型链上的属性

下面是一段经典的继承，通过这段代码来热热身，好戏马上开始：

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

var person = new Person('小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

现在我们来解决第一个问题：我们可以通过什么方式实现访问到构造函数里面的属性呢？答案是call或apply

function Parent() {
  this.name = ['A', 'B']
}

function Child() {
  Parent.call(this)
}

var child = new Child()
console.log(child.name) // ['A', 'B']

child.name.push('C')
console.log(child.name) // ['A', 'B', 'C']

第一个问题解决了，那我们又来解决第二个：那又怎么访问原型链上的属性呢？答案是__proto__

现在我们把上面那段热身代码稍加改造，不使用new来创建实例：

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

// var person = new Person('小明', 25)
var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

function New() {
  var obj = {}
  Constructor = [].shift.call(arguments) // 获取arguments第一个参数：构造函数
  // 注意：此时的arguments参数在shift()方法的截取后只剩下两个元素
  obj.__proto__ = Constructor.prototype // 把构造函数的原型赋值给obj对象
  Constructor.apply(obj, arguments) // 改变够着函数指针，指向obj，这是刚才上面说到的访问构造函数里面的属性和方法的方式
  return obj
}

以上代码中的New函数，就是new操作符的实现

主要步骤：

创建一个空对象
获取arguments第一个参数
将构造函数的原型链赋给obj
使用apply改变构造函数this指向，指向obj对象，其后，obj就可以访问到构造函数中的属性以及原型上的属性和方法了
返回obj对象

可能很多小伙伴看到这里觉得new不就是做了这些事情吗，然而~~

然而我们却忽略了一点，js里面的函数是有返回值的，即使构造函数也不例外。

如果我们在构造函数里面返回一个对象或一个基本值，上面的New函数会怎样？

我们再来看一段代码：

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
  
  return {
    name: name,
    gender: '男'
  }
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

var person = new Person('小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

执行代码，发现只有name和gender这两个字段如期输出，age、nation为undefined，say()报错。

改一下代码构造函数的代码：

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
  
  // return {
  //   name: name,
  //   gender: '男'
  // }
  return 1
}

// ...

执行一下代码，发现所有字段终于如期输出。

这里做个小结：

当构造函数返回引用类型时，构造里面的属性不能使用，只能使用返回的对象；
当构造函数返回基本类型时，和没有返回值的情况相同，构造函数不受影响。

那我们现在来考虑下New函数要怎么改才能实现上面总结的两点功能呢？继续往下看：

function Person(name, age) {
  // ...
}

function New() {
  var obj = {}
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  
  // return obj
  return typeof result === 'object' ? result : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
// ...

执行此代码，发现已经实现了上面总结的两点。

解决方案：使用变量接收构造函数的返回值，然后在New函数里面判断一下返回值类型，根据不同类型返回不同的值。

看到这里。又有小伙伴说，这下new已经完全实现了吧？！！答案肯定是否定的，下面我们继续看一段代码：

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
  
  // 返回引用类型
  // return {
  //   name: name,
  //   gender: '男'
  // }
  
  // 返回基本类型
  // return 1
  
  // 例外
  return null
}

再执行代码，发现又出问题了！！！

那为什么会出现这个问题呢？

刚才不是总结了返回基本类型时构造函数不受影响吗，而null就是基本类型啊？

此时心里一万头草泥马在奔腾啊有木有！！！

解惑：null是基本类型没错，但是使用操作符typeof后我们不难发现：

typeof null === 'object' // true

特例：typeof null返回为'object'，因为特殊值null被认为是一个空的对象引用。

明白了这一点，那问题就好解决了：

function Person(name, age) {
  // ...
}

function New() {
  var obj = {}
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
// ...

解决方案：判断一下构造函数返回值result，如果result是一个引用（引用类型和null），就返回result，但如果此时result为false（null），就使用操作符||之后的obj

好了，到现在应该又有小伙伴发问了，这下New函数是彻彻底底实现了吧！！！

答案是，离完成不远了！！

别急，在功能上，New函数基本完成了，但是在代码严谨度上，我们还需要做一点工作，继续往下看：

这里，我们在文章开篇做的铺垫要派上用场了：

var obj = {}

实际上等价于

var obj = new Object()

前面说了，以上两段代码其实只是获取了object对象的一个实例。再者，我们本来就是要实现new，但是我们在实现new的过程中却使用了new！

这个问题把我们引入到了到底是先有鸡还是先有蛋的问题上！

这里，我们就要考虑到ECMAScript底层的API了————Object.create(null)

这句代码的意思才是真真切切地创建了一个对象！！

function Person(name, age) {
  // ...
}

function New() {
  // var obj = {}
  // var obj = new Object()
  var obj = Object.create(null)
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
// 这样改了之后，以下两句先注释掉，原因后面再讨论
// console.log(person.nation)
// person.say()

好了好了，小伙伴常常舒了一口气，这样总算完成了！！

但是，这样写，新的问题又来了。

小伙伴：啥？还有完没完？

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

function New() {
  // var obj = {}
  // var obj = new Object()
  var obj = Object.create(null)
  Constructor = [].shift.call(arguments)
  obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
// 这里解开刚才的注释
console.log(person.nation)
person.say()

别急，我们执行一下修改后的代码，发现原型链上的属性nation和方法say()报错，这又是为什么呢？

new操作符的详细用法介绍 - 文章图片

从上图我们可以清除地看到，Object.create(null)创建的对象是没有原型链的，而后两个对象则是拥有__proto__属性，拥有原型链，这也证明了后两个对象是通过继承得来的。

那既然通过Object.create(null)创建的对象没有原型链（原型链断了），那我们在创建对象的时候把原型链加上不就行了，那怎么加呢？

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = '男'
}

Person.prototype.nation = '汉'

Person.prototype.say = function() {
  console.log(`My name is ${this.age}`)
}

function New() {
  Constructor = [].shift.call(arguments)
  
  // var obj = {}
  // var obj = new Object()
  // var obj = Object.create(null)
  var obj = Object.create(Constructor.prototype)
  
  // obj.__proto__ = Constructor.prototype
  // Constructor.apply(obj, arguments)
  var result = Constructor.apply(obj, arguments)
  // return obj
  // return typeof result === 'object' ? result : obj
  return typeof result === 'object' ? result || obj : obj
}

var person = New(Person, '小明', 25)

console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)

person.say()

这样创建的对象就拥有了它初始的原型链了，这个原型链是我们传进来的构造函数赋予它的。

也就是说，我们在创建新对象的时候，就为它指定了原型链了，新创建的对象继承自传进来的构造函数！

现在，我们来梳理下最终的New函数做了什么事，也就是本文讨论的结果————new操作符到底做了什么？

获取实参中的第一个参数（构造函数），就是调用New函数传进来的第一个参数，暂时记为Constructor；
使用Constructor的原型链结合Object.create来创建一个对象，此时新对象的原型链为Constructor函数的原型对象；（结合我们上面讨论的，要访问原型链上面的属性和方法，要使用实例对象的__proto__属性）
改变Constructor函数的this指向，指向新创建的实例对象，然后call方法再调用Constructor函数，为新对象赋予属性和方法；（结合我们上面讨论的，要访问构造函数的属性和方法，要使用call或apply）
返回新创建的对象，为Constructor函数的一个实例对象。

现在我，我们来回答文章开始时提出的问题，new是用来创建对象的吗？

现在我们可以勇敢的回答，new是用来做继承的，而创建对象的其实是Object.create(null)。
在new操作符的作用下，我们使用新创建的对象去继承了他的构造函数上的属性和方法、以及他的原型链上的属性和方法！

写在最后：

补充一点关于原型链的知识:
JavaScript中的函数也是对象，而且对象除了使用字面量定义外，都需要通过函数来创建对象
prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而__proto__是查找某函数或对象的原型链方式
prototype和__proto__都指向原型对象
任意一个函数（包括构造函数）都有一个prototype属性，指向该函数的原型对象
任意一个实例化的对象，都有一个__proto__属性，指向构造函数的原型对象。

以上就是new操作符的详细用法介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的new操作符的详细用法介绍全部内容，希望文章能够帮你解决new操作符的详细用法介绍所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/283212.html

来源：【匿名】

【上一篇】JavaScript普通函数和箭头函数有什么区别？【下一篇】javascript 怎么调用php方法

更多 ►

【new操作符的详细用法介绍】教程文章相关的互联网学习教程文章

QML中的JavaScript用法详解

熟悉JavaScript的应该都了解Netscape公司，一代骄子虽然倒下了，却给后人留下了最为珍贵的产品和经验，在互联网发展史上享有举足轻重的地位，这里就不讲故事了，虽然很精彩，从未被磨灭。QML是对JavaScript的扩展，提供了JS主机环境，用法相似，但有些地方与浏览器/服务器端提供的JS主机环境（如Node.js）是不同的，用起来又有一些限制，下面列举一些常用的方法。1、QML文件中的JS表达式初始化时属性绑定——// Property.qmlimport...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

javascript中闭包的2种经典用法

闭包这个东西，网上有很多介绍资料。个人看了很多，还是一知半解。这里不做理论介绍，直接给出2个例子。代码1：记录函数被调用的次数function a() {var i = 0;function b(){return ++i;}return b; }var c = a(); c();//1 c();//2这种方式类似C语言中的private static变量，能够保持局部变量的内存不释放。代码2：正确给DOM注册事件处理函数<body><input type="button" id="b1" value="1"><input type="button" id="b2" value="2"...

JS中的call()方法和apply()方法用法总结

JS中的call()方法和apply()方法用法总结 : 参考： https://blog.csdn.net/ganyingxie123456/article/details/70855586原文：https://www.cnblogs.com/wfblog/p/9169026.html

JavaScript toFixed 用法【代码】【图】

在JS中进行乘法运算时我们又是会遇到一下情况<input type="text" id="num1" value="" /> * <input type="text" id="num2" value="" /><input type="button" id="tt" value="="/><input id="result" type="text" value="" /> $(function(){$("#tt").click(function(){var num1=$("#num1").val();var num2=$("#num2").val();var result=num1*num2;$("#result").val(result);});});结果：正确的结果是 30.8 此时我们应该用toFixed(...

javascript call apply bind caller callee 的用法

在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的，先看一个例子。 var xw = { name : "小王", gender : "男", age : 24, ...

JavaScript BOM Cookie 的用法【代码】

JavaScript CookieCookie是计算机上存储在小文本文件中的数据。当Web服务器将网页发送到浏览器时，连接将关闭，服务器将忘记用户的所有内容。发明Cookie是为了解决“如何记住用户信息”的问题：当用户访问网页时，他/她的名字可以存储在cookie中。下次用户访问该页面时，cookie会“记住”他/她的名字。Cookie以键值对形式保存，如：username = John Doe当浏览器从服务器请求网页时，属于该页面的cookie将添加到请求中。这样，服务器...

javascript中函数定义调用及封闭，闭包用法总结

1， javascript函数定义调用 function test(){ alert("aaa"); } var a=function(){ alert(‘aa‘); } 2，javascript函数参数 function test(a,b){ return a+b; } 3,javascript封闭函数 (function (){ alert(‘www.96net.com.cn‘); })(); 4, javascript 闭包函数函数里面嵌套函数 function a{ function b(){ } return b; } 原文：https://www.cnblogs.com/96net/...

JavaScript中return的用法详解

1、定义：return 从字面上的看就是返回，官方定义return语句将终止当前函数并返回当前函数的值，可以看下下面的示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function func1(){ while (true){ return 1; } }; alert(func1()); </script></head><body></body></html>可以看到我在函数里面写了个死循环，然后在下...

JS Replace 详细用法讲解

javascript 之 this 用法【代码】

参考视频：http://www.imooc.com/video/6430JavaScript中的this比较灵活，也是让很多初学者摸不到头脑，那么根据在不同的环境下，在同一个函数，不同的调用方式下，那么这个this也有可能是不同的。我们先来看，全局作用于下的this。全局的this(浏览器)console.log(this.document===documet);//trueconsole.log(this===window);//truethis.a=37;console.log(window.a);//37全局作用域下的this一般指的是全局对象，在浏览器里面一般指...

JavaScript随笔之——函数用法【代码】

1、reduce函数用法：$(function(){// arrowMouseOver();Array.prototype.reduce=null; //将内置reduce函数设置为nullvar eleResult=document.getElementById("result");console.log=function(result){var text=document.createTextNode(result);var br=document.createElement("br");//var name=document.createAttribute("data-name"); eleResult.appendChild(text);eleResult.appendChild(br);//br.setAttribute(name,"z...

JavaScript 用法

JavaScript 用法HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 标签如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。<script> 和 </script> 之间的代码行包含了 JavaScript:<script>alert("我的第一个 JavaScript");</script>您无需理解上面的代码。只需明白，浏览器会解释并执行位...

IFE_part2_JavaScript_DOM的具体用法【代码】

// DOM// 为element增加一个样式名为newClassName的新样式 // 另一种方法，element.classList.add(‘newClassName‘),但是存在兼容性问题（不兼容IE10以下） function addClass(element, newClassName) {if (!hasClass(element, newClassName)) {element.className += " " + newClassName;// element.className += " "// element.className += newClassName} }// 移除element中的样式oldClassName // 也可以这样子写 // function r...

javascript中的location.href有很多种用法【代码】

javascript中的location.href有很多种用法，主要如下。self.location.href="/url" 当前页面打开URL页面 location.href="/url" 当前页面打开URL页面 windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。 this.location.href="/url" 当前页面打开URL页面 parent.location.href="/url" 在父页面打开新页面 top.location.href="/url" 在顶层页面打开新页面如果页面中自定义了frame，那么可将parent self top换为自定...

首页 / JAVASCRIPT / new操作符的详细用法介绍

new操作符的详细用法介绍

内容导读

内容图文

内容总结

内容备注

内容手机端

【new操作符的详细用法介绍】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程