JS中new运算符的实现原理
当我们用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运算符的实现原理的更多相关文章
- js中的运算符和条件语句
js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- JS中的运算符和JS中的分支结构
JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...
- 让你彻底搞懂JS中复杂运算符==
让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...
- JS中的运算符_函数学习
js中的运算符: 算数运算符: + - * / % ++ -- 逻辑运算符: & | ! && || < > <= ...
- js中的运算符优先级顺序
js中运算符优先级从高到底的顺序: 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
- JS中的运算符 以及变量和输入输出
1.算术运算(单目运算符) + 加 .- 减.* 乘. / 除. % 取余.++ 自增.-- 自减. >>> +:有两种作用,链接字符串/加法运算,当+两边全为数字时,进行加法运算, ...
- 浅谈JS中逗号运算符的用法
阅读本文的前提是,你能区分什么是表达式,什么是语句.还有明确运算符和运算数都是些啥东西.所谓的表达式就是一个JavaScript的"短语",JavaScript的解释器可以计算它, ...
- JS中短路运算符&&和||
在JS函数中我们经常会使用到短路运算符,主要是逻辑与(&&) 和 逻辑或(||) 1.逻辑与 && 的运算方式 var a = 5 && 6; cons ...
随机推荐
- icon-font 字体图标的引用
1.font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好, ...
- spark出现task不能序列化错误的解决方法
应用场景:使用JavaHiveContext执行SQL之后,希望能得到其字段名及相应的值,但却出现"Caused by: java.io.NotSerializableException: ...
- html 颜色在线取色器
推荐一个链接 还不错 http://www.atool.org/colorpicker.php
- Virtualenv-windows
1.下载 pip3 install virtualenv 2.创建虚拟化环境 3. 进入虚拟化目录 4.推出虚拟化环境 5.指定python版本 二.virtualenvwrapper的使用 1.下载 ...
- JavaScript返回上一页
目前来说有两种方法: window.history.back(); // 返回上一页不刷新 window.location.href = document.referrer; // 返回上一页并刷新
- Spring学习之-各注解的含义总结
注解配置 @ComponentScan("spittr.web"):/在加载Spring上下文时,会扫描spittr.web包查找组件 @ComponentScan注解扫描的组件有 ...
- hashcode方法 简析
package com.ycgwl; import java.util.HashMap; class People{ private String name; private int age; pub ...
- 学习Road map Part 04 自动驾驶、SLAM、ROS、树莓派
学习Road map Part 04 自动驾驶.SLAM.ROS.树莓派
- Django 导出csv文件 中文乱码问题
import csvimport codecsimport datetimefrom django.db import connectionfrom django.contrib.auth.model ...
- Architecture Design Process
Architecture Design Process The architecture design process focuses on the decomposition of a system ...