提到new,肯定会和类和实例联系起来,如:

function Func() {
let x = 100;
this.num = x +
}
let f = new Func();

上面的代码,我们首先创建了一个函数,如果是用面向对象的说法就是创建了一个Function类的实例,如果直接执行这个函数,那它就是一个普通的函数,如果用new执行,则这个函数被称为一个自定义的类。

如果是一个普通函数执行,他会如下做几件事:

  ·形成一个全新的执行上下文EC(Execution Context 执行环境)

  ·形成一个AO(Activation Object 活动对象)变量对象,初始化arguments和形参赋值

  ·初始化作用域链

  ·代码执行

如果是new函数执行,它既有普通函数执行的一面,也有自己独有的东西:

  ·默认创建一个对象,而这个对象就是当前类的实例

  ·声明其this指向,让其指向这个新创建的实例

  ·不论其是否写return,都会把新创建的实例返回,这里有个特殊点,如果用户自己返回内容,且返回的是一个引用类型值,则会把默认返回的实例给覆盖掉,此时返回的值就不再是类的实例了

console.log(f);  //=>{num:200}
//f是Func这个类的实例
//相当于给创建的实例对象新增一个num的属性 obj.num=200 (因为具备普通函数执行的一面,所以只有this.xxx=xxx才和创建的实例有关系,此案例中的x只是AO中的私有变量) console.log(f instanceof Func); //=>TRUE instanceof用来检测某一个实例是否属于这个类

每一次new出来的都是一个新的实例对象

console.log(f === f2); //=>false 

既然知道了new都做了什么事情,我们重新一下new:

/*
* 内置NEW的实现原理
* @params
* Func:操作的那个类
* ARGS:NEW类的时候传递的实参集合
* @return
* 实例或者自己返回的对象
*/
function _new(Func, ...args) {
//默认创建一个实例对象(而且是属于当前这个类的一个实例)
let obj = {}; //也会把类当做普通函数执行
//执行的时候要保证函数中的this指向创建的实例
let result = Func.call(obj, ...args); //若客户自己返回引用值,则以自己返回的为主,否则返回创建的实例
if ((result !== null && typeof result === "object") || (typeof result === "function")) {
return result;
}
return obj;
}

我们试一下:

let f3 = _new(Func);
console.log(f3); // =>{num: 200}

我们继续测试:

Func.prototype.log = function () {
console.log('ok');
} let f4 = _new(Func);
f4.log(); //=>Uncaught TypeError: f4.log is not a function

也就是说,Func原型上的方法其实例没法调用,我们还需要修改:

/*
* 内置NEW的实现原理
* @params
* Func:操作的那个类
* ARGS:NEW类的时候传递的实参集合
* @return
* 实例或者自己返回的对象
*/
function _new(Func, ...args) {
//默认创建一个实例对象(而且是属于当前这个类的一个实例)
// let obj = {};
let obj = Object.create(Func.prototype); //也会把类当做普通函数执行
//执行的时候要保证函数中的this指向创建的实例
let result = Func.call(obj, ...args); //若客户自己返回引用值,则以自己返回的为主,否则返回创建的实例
if ((result !== null && typeof result === "object") || (typeof result === "function")) {
return result;
}
return obj;
}

这样应该就可以了。

let f6 = _new(Func);
f6.log(); //=>ok

JS中new的实现原理及重写的更多相关文章

  1. 详解 JS 中 new 调用函数原理

    JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数),那在使用 new 调用一个函数的时候到底发生了什么?先看几个例子,再解释背后发生了什么. 1)看三个例子 1.1 ...

  2. 在jsp页面的js中使用Cookie的原理介绍以及相应方法的代码

    1. 设置cookie 1.1 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="user_Id=828&q ...

  3. 解析Vue.js中的computed工作原理

    我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的.写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指 ...

  4. jQuery的封装方式与JS中new的实现原理

    function jQuery() { return new jQuery.fn.init(); } jQuery.fn = jQuery.prototype = { init: function() ...

  5. JS中的new操作符原理解析

    var Person = function(name){ this.name = name; } Person.prototype.sayHello = function() { console.lo ...

  6. 深入理解JS中的对象(二):new 的工作原理

    目录 序言 不同返回值的构造函数 深入 new 调用函数原理 总结 参考 1.序言 在 深入理解JS中的对象(一):原型.原型链和构造函数 中,我们分析了JS中是否一切皆对象以及对象的原型.原型链和构 ...

  7. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  8. js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. paip.编程语言方法重载实现的原理及python,php,js中实现方法重载

    paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...

随机推荐

  1. [洛谷P4707] 重返现世

    Description 为了打开返回现世的大门,\(Yopilla\) 需要制作开启大门的钥匙.\(Yopilla\) 所在的迷失大陆有 \(n\) 种原料,只需要集齐任意 \(k\) 种,就可以开始 ...

  2. 【模板】2-SAT问题

    问题简述 有 \(n\) 个变量,每个变量可赋为 \(1\) 或 \(0\) 必须满足一些限制条件,如" \(a\) 为1 或 \(b\) 为0 " " \(a\) 为0 ...

  3. C语言进阶——全局变量

    全局变量 ·定义在函数外面的变量是全局变量 ·全局变量具有全局的生存期和作用域 ·它们与任何函数都无关 ·在任何函数内部都可以使用它们 全局变量初始化 ·没有做初始化的全局变量会得到0值 ·指针会得到 ...

  4. CQBZOJ 邮递员(直播剪枝技巧)

    题目描述 Mirko在一个山镇找到了一份邮递员的工作.这个镇可以看作一个N*N的矩形.每个区域可能是以下之一:房子K,邮政局P,草地 '.'.每个区域都有一个海拔. 每天早上,Mirko要送信给镇上所 ...

  5. [CF 487C Prefix Product Sequence]

    题意 将1~n的正整数重排列,使得它的前缀积在模n下形成0~n-1的排列,构造解或说明无解.n≤1E5. 思考 小范围内搜索解,发现n=1,n=4和n为质数时有解. 不难发现,n一定会放在最后,否则会 ...

  6. 科普文,搭建python开发环境

    Python简介!首先,是一门面向对象的程序设计语言,先说3个优点!1.有条理,简单,易学,易用.2.强大!可以把其他编程语言制作的模块利用起来.3.拥有丰富的库.Python作为高级编程语言,拥有的 ...

  7. 拓扑排序(基于dfs+基于队列)

    经典问题-Ordering Tasks dfs函数的返回值表示是否成环,若存在有向环,则不存在拓扑排序.不包含有向环的有向图称为有向无环图(DAG) 可以借助DFS完成拓扑排序,在访问完一个结点时把他 ...

  8. java 排序算法分析

    一.冒泡排序(时间复杂度O(N^2)) public int[] bubbling(int[] arr){ ) return arr; ; i--){ 1 ; j < i-; j ++){ 2 ...

  9. Java:线程的六种状态及转化

    目录 Java:线程的六种状态及转化 一.新建状态(NEW) 二.运行状态(RUNNABLE) 就绪状态(READY) 运行状态(RUNNING) 三.阻塞状态(BLOCKED) 四.等待状态(WAI ...

  10. C++对于C故有问题的改进

    C++继承了所有的C特性,并且提供了更丰富的语法和特性(OOP支持.模板支持等),并且拥有和C语言同样出色的运行效率.针对C语言的固有问题,C++做出了如下的升级: 所有变量都可以在需要使用时再定义( ...