加入收藏 | 设为首页 | 会员中心 | 我要投稿 张家口站长网 (https://www.0313zz.com.cn/)- 办公协同、操作系统、混合云网络、数据湖、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

javascript的new关键字用法是什么?怎样实现一个new?

发布时间:2022-03-12 13:31:19 所属栏目:语言 来源:互联网
导读:javascript的new关键字用法是什么?关于new关键字,大家应该都比较熟悉,这篇文章主要给大家分享构造函数、new操作符和如何实现一个new,小编觉得挺实用的,感兴趣的朋友就继续往下看吧。 构造函数 在介绍new之前,必须要知道什么是构造函数。 构造函数和普
      javascript的new关键字用法是什么?关于new关键字,大家应该都比较熟悉,这篇文章主要给大家分享构造函数、new操作符和如何实现一个new,小编觉得挺实用的,感兴趣的朋友就继续往下看吧。
 
      构造函数
      在介绍new之前,必须要知道什么是构造函数。
 
    构造函数和普通函数在写法上没有任何区别,当一个函数通过new Fun()调用时,就叫做构造函数,构造函数首字母通常大写。
 
function User(name) {
    this.name = name;
}
 
let u = new User('leo');
    这里,User就是构造函数,当然你也可以直接调用User(),但是这样就起不到创建实例的作用,在非严格模式下,会把name属性挂在window上。
 
    new 操作符
    那么new操作符到底做了什么事情呢,可以创建出一个实例?
 
    new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new关键字会进行如下的操作:
 
    1.创建一个空的简单JavaScript对象(即**{}**);
 
    2.链接该对象(即设置该对象的构造函数)到另一个对象 ;
 
    3.将步骤1新创建的对象作为**this**的上下文 ;
 
    4.如果该函数没有返回对象,则返回**this**。
 
    以上引用自new 操作符 - MDN
 
    可能第 2、4 步大家看的不是很明白,这里我重新总结一下这 4 个步骤:
 
    1.创建一个空对象u = {}
 
    2.绑定原型,u.__proto__ = User.prototype
 
    3.调用User()函数,并把空对象u当做this传入,即User.call(u)
 
    4.如果User()函数执行完自己return一个object类型,那么返回此变量,否则返回this,注意:如果构造函数返回基本类型值,则不影响,还是返回this
 
    自己实现一个 new
    知道了new操作符的原理,下面我们自己来实现一个FakeNew函数。
 
function FakeNew() {
    let obj = {};
  
    // 将类数组 arguments 转为数组,同时将第一个参数也就是构造函数 shift 出来
    let constructor = [].shift.apply(arguments);  
 
    // 绑定原型
    obj.__proto__ = constructor.prototype;    
  
    // 调用构造函数,将 obj 当做 this 传入
    let res = Constructor.apply(obj, arguments);    
 
    // 返回
    return typeof res === 'object' ? res : obj;   
}
 
function User(name) {
    this.name = name;
}
 
User.prototype.getName = function() {
    return this.name;
}
 
let u = FakeNew(User, 'leo');
console.log(u);
console.log(u.getName());
    相应关键步骤的注释已经附在代码里面了,这样我们就实现了一个new操作,相信大家以后再看到new,会有一种通透的感觉了。

(编辑:张家口站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读