当我们用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. js获取当前日期和时间的代码

    最佳答案 var myDate = new Date(); myDate.toLocaleDateString(): //获取当前日期myDate.toLocaleTimeString(); //获取 ...

  2. Linux系统搭建GitLab---阿里云Centos7搭建Gitlab踩坑

    一.简介 GitLab,是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目安装. 它拥有与GitHub类似的功能,能 ...

  3. ArcSDE 常用命令

    一.sdeservice命令: 1. 创建sde服务:sdeservice –o create ArcSDE常用操作命令(转): 启动cmd 1. 创建和删除ArcSDE服务操作命令(sdeservi ...

  4. php 环境搭配 脚本模式(1)

    php介绍目标1:<?phpecho 'hello world'; //配置好了apacheecho '<br/> 现在时间:" .date(’Y-m-d H:i:s‘)“ ...

  5. python读写不同编码txt文件

        以后整理规范 import os import codecs filenames=os.listdir(os.getcwd()) out=file("name.txt",& ...

  6. HTTP Status 500 - Handler processing failed; nested exception is java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

    今天在用idea搭建spring mvc时候报了这个错误,缺少jstl的依赖包.由于是使用的spring-core的依赖,而spring-core里面是有jstl的.这就郁闷了,最后是在自己的pom. ...

  7. python 二叉树计算器

    例子:计算1+2+3+4的值 代码: class Buffer(object): """字符串处理函数""" def __init__(se ...

  8. Linux ->> VMWare Workstation虚拟机里的UBuntu系统安装VMWare-tools

    1) mkdir创建一个临时目录 2)复制gz压缩包到临时目录下 3)解压到当前目录 4)运行.pl文件安装 root@ubuntu:/# root@ubuntu:/# cd /tmp/ root@u ...

  9. 【Z】段错误Segment Fault定位,即core dump文件与gdb定位

    使用C++开发系统有时会出现段错误,即Segment Fault.此类错误程序直接崩溃,通常没有任何有用信息输出,很难定位bug,因而无从解决问题.今天我们介绍core dump文件,并使用gdb进行 ...

  10. February 11 2017 Week 6 Saturday

    Love means never having to say you're sorry. 爱就是永远不必说对不起. Yesterday I heard an interesting story fro ...