当我们用new运算符new一个构造函数产生一个实例时,比如说: var obj = new Func 时,其背后的步骤是这样的:

1:创建一个继承自 Func.prototype 的新对象;
2:执行构造函数 Func ,执行的时候,相应的传参会被传入,同时上下文(this)会被指定为第一步创建的新实例;
3:如果构造函数返回了一个“对象”,那么这个对象会取代步骤1中new出来的实例被返回。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。

注意:new Func 等同于new Func(),只能用在不传递任何参数的情况。

按照上述原理,写一段代码模拟new运算符的实现原理:

//new运算符原理实现
var new1 = function(fun){
var newObj = Object.create(fun.prototype);
var returnObj = fun.call(newObj);
if(typeof returnObj === 'object'){
return returnObj
}else{
return newObj
}
}

其中  var newObj  = Object.create(fun.prototype)  的意思是:创建一个新对象newObj,并让 newObj.__proto__  指向 fun,即  newObj.__proto__  === fun 返回true。

测试一下~

var strObj = new1(String);
alert(strObj instanceof String); //true
alert(strObj.__proto__.constructor === String); //true

可以看到,new1函数的运行效果和new运算符是一样的。我们继续给String的原型上添加一个方法,看看new1函数得到的strObj能否继承到这个方法:

String.prototype.defineByN = function(){
alert("我是自定义方法");
}
strObj.defineByN(); //弹出“我是自定义方法”

可以看到new1函数得到的strObj继承了到这个方法。

JS中new运算符的实现原理的更多相关文章

  1. js中的运算符和条件语句

    js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...

  2. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  3. JS中的运算符和JS中的分支结构

    JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...

  4. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  5. JS中的运算符_函数学习

    js中的运算符:     算数运算符:     + - * / % ++ --          逻辑运算符:     & | !  && || < > <= ...

  6. js中的运算符优先级顺序

    js中运算符优先级从高到底的顺序: 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

  7. JS中的运算符 以及变量和输入输出

    1.算术运算(单目运算符) + 加 .- 减.* 乘. / 除. % 取余.++ 自增.-- 自减. >>> +:有两种作用,链接字符串/加法运算,当+两边全为数字时,进行加法运算, ...

  8. 浅谈JS中逗号运算符的用法

    阅读本文的前提是,你能区分什么是表达式,什么是语句.还有明确运算符和运算数都是些啥东西.所谓的表达式就是一个JavaScript的"短语",JavaScript的解释器可以计算它, ...

  9. JS中短路运算符&&和||

    在JS函数中我们经常会使用到短路运算符,主要是逻辑与(&&) 和 逻辑或(||) 1.逻辑与 && 的运算方式 var a = 5 && 6; cons ...

随机推荐

  1. Apache Maven 3.5.0配置安装

    1.maven 3.5 下载地址:http://maven.apache.org/download.cgi 2.下载了解压到 3.配置环境变量 4.测试看是否安装成功 5.maven配置(全局配置,用 ...

  2. jquery根据id取不到textarea对象,无法给textarea赋值

    小编定义了一个textarea控件,却无法根据id取到textarea对象并赋值. 经过实验,得出了原因.代码如下: <!DOCTYPE html><html><head ...

  3. [小北De编程手记] : Lesson 04 - Selenium For C# 之 API 上

    这一部分,我准备向大家介绍Selenium WebDriver的常用API,学习这部分内容需要大家最好有一些简单的HTML相关知识,本文主要涉及到以下内容: Selenium API:元素检查 Sel ...

  4. memset用法详解

    原文:http://www.cnblogs.com/PegasusWang/archive/2013/01/20/2868824.html 1.void *memset(void *s,int c,s ...

  5. Python爬虫教程-33-scrapy shell 的使用

    本篇详细介绍 scrapy shell 的使用,也介绍了使用 xpath 进行精确查找 Python爬虫教程-33-scrapy shell 的使用 scrapy shell 的使用 条件:我们需要先 ...

  6. windows c++ 修改用户的文件夹操作权限

    一般Windows下的系统文件(夹)只让受限帐户读取而不让写入和修改.如果要开启写操作权限就需要手动修改文件(夹)的用户帐户安全权限(这操作当然要在管理员帐户下执行).以下用程序封装了一下该操作: # ...

  7. 如何编写自定义hive UDF函数

    Hive可以允许用户编写自己定义的函数UDF,来在查询中使用.Hive中有3种UDF: UDF:操作单个数据行,产生单个数据行: UDAF:操作多个数据行,产生一个数据行. UDTF:操作一个数据行, ...

  8. Linux文件系统的实现 ZZ

    作者:Vamei 出处:http://www.cnblogs.com/vamei Linux文件管理从用户的层面介绍了Linux管理文件的方式.Linux有一个树状结构来组织文件.树的顶端为根目录(/ ...

  9. 【NLP_Stanford课堂】情感分析

    一.简介 实例: 电影评论.产品评论是positive还是negative 公众.消费者的信心是否在增加 公众对于候选人.社会事件等的倾向 预测股票市场的涨跌 Affective States又分为: ...

  10. 2维FFT算法实现——基于GPU的基2快速二维傅里叶变换

    上篇讲述了一维FFT的GPU实现(FFT算法实现——基于GPU的基2快速傅里叶变换),后来我又由于需要做了一下二维FFT,大概思路如下. 首先看的肯定是公式: 如上面公式所描述的,2维FFT只需要拆分 ...