javascript中new关键字机制

2017-06-06

js中,构造函数和普通函数声明没什么区别(唯一的区别就是一些规范吧,比如声明构造函数首字母大写,可以用this,普通函数首字母小写,通常不用this等等),比如一个函数

function Foo(name) {
    this.name = name || 'default';
}

可以直接调用,也可以用new关键字来实例化

比如在浏览器直接调用Foo('hello')时候,this指向的是window对象,所以window.name的值为hello

用new实例化

var f = new Foo('hello');

那么this指向f,可以通过f来获取name属性

其实new在js运行时候做了下面这些事

  1. 新建一个新的对象
  2. 新的对象的__proto__指向构造函数的prototype
  3. this指向新的构造函数
  4. 如果构造函数有返回非空对象就返回,否则返回新的对象

根据上面的步骤,我们可以模拟一个new功能,完整代码如下

function NewObject (constructor, ...rests) {
    var obj = Object.create(constructor.prototype);
    // this指向obj
    var returnRet = constructor.apply(obj, rests);
    var isPrimitive = returnRet == null || (typeof returnRet !== "object" && typeof returnRet !== "function")
    return isPrimitive ? obj: returnRet;
}
function Foo(name) {
    this.name = name || 'default';
}

function NewObject (constructor, ...rests) {
    var obj = Object.create(constructor.prototype);
    // this指向obj
    var returnRet = constructor.apply(obj, rests);
    var isPrimitive = returnRet == null || (typeof returnRet !== "object" && typeof returnRet !== "function")
    return isPrimitive ? obj: returnRet;
}

var a = NewObject(Foo, "kelen");
var a2 = new Foo("kelen");

console.log(a)
console.log(a2);

标签: javascript

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
webpack插件实现
webpack 插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安...