js的new操作符深度解析

引言

  • 我们都知道new操作符在js中一般是用来创建一个构造函数的实例,它在创建实例具体做了什么,MDN文档是这么说的: 我一开始看到,完全没有任何的头绪和理解,到底什么意思,后面通过上网查阅了大量的资料,对new操作符有了初步的认识。

    1、创建一个空的简单JavaScript对象(即{});
    2、链接该对象(即设置该对象的构造函数)到另一个对象 ;
    3、将步骤1新创建的对象作为this的上下文 ;
    4、如果该函数没有返回对象,则返回this。

普通函数和构造函数的区别

  • 在js中 普通函数和构造函数并无本质的区别,都是函数,构造函数约定首字母大写(主要目的区分普通函数和构造函数)。并且通过new操作符调用并创建构造函数的实例。

new操作符做了什么


 var _this = null
 function Fun(){
     this.name = '车神-黄杰'
     this.gender = '男'
     this.age = 23

     _this = this
     console.log('this--->', this)
 }

 var foo = new Fun()
 console.log('foo--->', foo)
 console.log('foo === _this--->', foo === _this)
 console.log('name--->', foo.name)

输出结果

创建空对象(第一步)


 var fun = new Object()

链接该对象(第二步)

  • 其实就是设置了第一步创建的空对象fun__proto__属性 和 构造函数Funprototype属性指向同一块内存地址。

 var fun = new Object()// 1
 fun .__proto__ = Fun.prototype// 2

新创建的对象作为this的上下文(第三步)

  • 这里和第二步类似,即第一步创建的空对象funthis指向同一块内存地址(这是我个人理解)

 var fun = new Object()// 1
 fun .__proto__ = Fun.prototype// 2
 this = fun// 3

返回值(第四步)

  • 我们知道函数的调用即为函数名,后面紧跟一个括号,创建构造函数的实例是 new Fun(),自然会调用构造函数,那构造函数里面的代码必然会执行。当构造函数没有返回具体对象(注意这里是对象),默认是返回this。执行var foo = new Fun()这一句代码即为foo接收了返回值this,结果就是foo也指向了this所指向的内存地址。说白了空对象funthis、实例foo指向了同一块内存地址。当你往this添加了name、gender、age属性,自然实例foo也能访问到。

隐式参数

  • 为什么函数调用的时候没有传递this和arguments,却可以使用它们呢,原因就是在调用函数的时候会默认传递两个隐式参数this和arguments,其中的this即为第三步的thisarguments是一个伪数组对象,包含着传入函数中的所有参数。

构造函数有具体的返回对象

  • 当构造函数有返回新的对象(注意这里是对象),执行var foo = new Fun()这一句代码,foo接收的值为构造函数返回的具体的对象。

 var _this = null
 function Fun(){
     this.name = '车神-黄杰'
     this.gender = '男'
     this.age = 23

     _this = this
     console.log('this--->', this)

    //返回新的对象
     return {name: '我是新的name'}
 }

 var foo = new Fun()
 console.log('foo--->', foo)
 console.log('foo === _this--->', foo === _this)
 console.log('name--->', foo.name)

输出结果

模拟new操作符

  • 这里用到了函数对象的两个主要的方法apply、call,总的来说就是可以调用函数并且绑定具体this
 function cloneNew(){

     //先获取传递进来的构造函数对象
     //默认为第一个参数 由于arguments不是数组
     //不能直接使用数组的shift方法(自己了解 shift 的方法使用)
     //可以通过函数的call方法获取并去除arguments的第一个参数
     var constructor = [].shift.call(arguments)             

     //第一步:创建一个空对象
     var obj = new Object()

     //第二步:链接该对象
     obj.__proto__ = constructor.prototype

     //第三步:新创建的对象作为this的上下文
     //这里借助函数对象的 apply 方法,对应还有一个 call 方法
     var newObj = constructor.apply(obj,arguments)

     //第四步:判断构造函数有没有返回具体的对象
     return newObj instanceof Object ? newObj : obj
 }

 //返回this
 function Fun(name){
     this.name = name
 }

 //返回具体对象
 function Foo(name){
     this.name = name
     //返回具体得到对象
     return {name: '新的黄杰'}
 }

 var fun = cloneNew(Fun, '黄杰')
 var foo = cloneNew(Foo, '黄杰')

 console.log('this的name--->'+ fun.name)// 输出 黄杰
 console.log('构造函数返回具体对象的name--->'+ foo.name)//输出 新的黄杰

输出结果

注意

  • 这里完全讨论的是new操作符,没有具体讨论this的指向问题,本人也在不断努力学习中,如有错误,恳请多多指教。

原文地址:https://www.cnblogs.com/HJ412/p/11235831.html

时间: 2024-11-02 08:01:28

js的new操作符深度解析的相关文章

openerp child_of操作符深度解析

child_of  此操作符,从代码来看,等价于: [('x','child_of',id)] ==>  x.prarent_left >=id.parent_left && x.parent_left <= id.parent_right , 求x(的集合). 为了形象的说明,我们一步步来: 首先,模型定义里面必需要有parent_left / parent_right ,才支持在这个模型上执行 child_of 操作(odoo硬编码,不要问我为什么),如下: mode

第三十七课、深度解析QMap与QHash

一.QMap深度解析 1.QMap是一个以升序键顺序存储键值对的数据结构 (1)QMap原型为class QMap<K, T>模板 (2).QMap中的键值对根据key进行了排序 (3).QMap中的key类型必须重载operator <     (小于操作符) 2.QMap使用实例一 3.QMap使用实例二 4.QMap的注意事项 (1).通过key获取Value时 A.当key存在,返回对应的Value B.当key不存在,返回值类型所对应的"零"值 (2).插入

第37课 深度解析QMap与QHash

1. QMap深度解析 (1)QMap是一个以升序键顺序存储键值对的数据结构 ①QMap原型为 class QMap<K, T>模板 ②QMap中的键值对根据Key进行了排序 ③QMap中的Key类型必须重载operator< .(即“小于”操作符) (2)QMap使用示例1 QMap<QString, int> map; //注意插入时是无序的 map.insert("key 2", 2); map.insert("key 0", 0

深度解析javascript中的浅复制和深复制

原文:深度解析javascript中的浅复制和深复制 在谈javascript的浅复制和深复制之前,我们有必要在来讨论下js的数据类型.我们都知道有Number,Boolean,String,Null,Undefined,Object五种类型.而Object又包含Function,Array和Object自身.前面的五种类型叫做基本类型,而Object是引用类型.可能有人就要问,为什么要分基本类型和引用类型呢?后面你就会明白的. 我们首先来看看浅复制和深复制的简洁定义: 深复制:直接将数据复制给

[Web_Cookie]Cookie深度解析

Cookie简介 众所周知,Web协议(也就是HTTP)是一个无状态的协议(HTTP1.0).一个Web应用由很多个Web页面组成,每个页面都有唯一的URL来定义.用户在浏览器的地址栏输入页面的URL,浏览器就会向Web Server去发送请求.如下图,浏览器向Web服务器发送了两个请求,申请了两个页面.这两个页面的请求是分别使用了两个单独的HTTP连接.所谓无状态的协议也就是表现在这里,浏览器和Web服务器会在第一个请求完成以后关闭连接通道,在第二个请求的时候重新建立连接.Web服务器并不区分

深度解析 Vue 响应式原理

深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进阶,亦或是源码解读,你都能在本图谱中得到满意的答案,希望这个面试图谱能够帮助到大家更好的准备面试. Vue 初始化 在 Vue 的初始化中,会先对 props 和 data 进行初始化 Vue.prototype._init = function(options?: Object) { // ...

Kafka深度解析

Kafka深度解析 原创文章,转载请务必将下面这段话置于文章开头处(保留超链接).本文转发自Jason's Blog,原文链接 http://www.jasongj.com/2015/01/02/Kafka深度解析 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,即使对TB级以上数据也能保证常数时间的访问性能 高吞吐率.即使在非常廉价的商用机器上也能做到单机支持每秒100K条消息的传输 支持Kafk

数据库深度解析 | 从NoSQL历史看未来

数据库深度解析 | 从NoSQL历史看未来 http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=209753217&idx=1&sn=d3a021a7bd959cbf92ffc658336b2387&scene=1&srcid=fWEZMjyaJKjZo5wrpSiB&from=singlemessage&isappinstalled=0#rd 本文根据王晶昱(花名沈询)老师在“高可用架构”微信群

Deep Learning模型之:CNN卷积神经网络(一)深度解析CNN

http://m.blog.csdn.net/blog/wu010555688/24487301 本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流. [1]Deep learning简介 [2]Deep Learning训练过程 [3]Deep Learning模型之:CNN卷积神经网络推导和实现 [4]Deep Learning模型之:CNN的反向求导及练习 [5]Deep Learning模型之:CNN卷积神经网络(一)深度解析CNN [6]Deep Learn