DDR爱好者之家

浅析JS中NEW的实现原理及重写
站长资源 2024/11/24 佚名
20 1538
DDR爱好者之家 Design By 杰米

提到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的实现原理及重写，希望对大家有所帮助，也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米