文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

深入理解New操作符

2024-12-01 14:00

关注

原理分析

我们通过一个具体的例子来看下一个函数在new之后都能做些什么,如下所示:

function Person(name, age) {
this.name = name;
this.age = age;
this.height = "175cm";
this.bodyWeight = "65kg";
return "some anything";
}


Person.prototype.dailyExercise = "300 kcal";
Person.prototype.printBodyWeight = function() {
console.log(this.name + "体重为: " + this.bodyWeight);
};

接下来,我们用new关键字将Person函数进行实例化,我们发现实例化后,可以访问到:

const person = new Person("神奇的程序员", "22");
console.log(person.age);
console.log(person.bodyWeight);
console.log(person.dailyExercise);
person.printBodyWeight();

眼尖的开发者可能已经发现我们的构造函数中返回了一个字符串,它是属于基本类型,如果我们返回一个对象会发生什么?

function Person(name, age) {

return {
bodyWeight: this.bodyWeight
};
}

再次运行代码后,我们发现:

只能访问我们在构造函数中所返回的属性。

构造函数中声明的其它属性以及挂载在原型上的属性均无法访问。

实现思路

经过前面的分析,我们知道了函数在new完之后会返回一个新的对象,这个对象上挂载了构造函数内的所有属性以及函数原型上的所有属性。

我们在实现的时候,也需要建立一个新的对象,这个对象上需要包含构造函数里的属性,因此我们可以使用apply方法来给此对象添加新属性。

在深入理解原型链与继承文章中,我们知道实例的 __proto__​属性会指向构造函数的prototype,建立起这样的关系后,实例才可以访问原型上的属性。

有了这些知识点作为铺垫后,我们就可以写出这个模拟函数了,如下所示:

有返回值且其类型为一个对象或者一个函数,则返回构造函数的返回值

否则就返回我们新创建的对象

function instantiateFactory() {
const obj = {};

const Constructor = [].shift.call(arguments);

obj.__proto__ = Constructor.prototype;

const result = Constructor.apply(obj, arguments);

if (result && (typeof result == "object" || typeof result == "function")) {
return result;
}

return obj;
}

测试用例

我们用原理分析中的例子来验证下我们实现的这个工厂函数能否正确执行。

const factory = instantiateFactory(Person, "神奇的程序员", "22");
console.log(factory.age);
console.log(factory.bodyWeight);
console.log(factory.dailyExercise);
factory.printBodyWeight();

假设函数没有返回值或者返回值是一个字符串类型时,执行结果如下所示:

当函数的返回值是一个对象时,执行结果如下所示:

来源:神奇的程序员内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯