当前位置:首页 » 《随便一记》 » 正文

JavaScript之手撕new_战场小包的博客

16 人参与  2022年03月10日 14:33  分类 : 《随便一记》  评论

点击全文阅读


前言

什么是new呢?

new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。
光看定义还是有几分晦涩,直接看一个具体的例子,来了解一下JavaScript中的new实现的功能。

举个例子

// 现实中瘦不了,但网络中一定要保持苗条
function Thin_User(name, age) {
    this.name = name;
    this.age = age;
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做梦吧,留下肥胖的泪水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch(); 

通过上面这个例子,我们可以发现xiaobao可以:

  • 访问到构造函数Thin_User中属性
  • 访问到Thin_User.prototype中属性

描述得更直白一点,new做了这些事:

  • 创建了一个空对象,对象的__proto__->Thin_User.prototype
  • 执行构造函数,并将this指向新对象
  • 返回新对象

补充说明

由于new是关键字,我们无法像模拟数组高阶方法一样覆盖,因此我们写一个函数createObject,来模拟new的效果。使用具体如下:

function Thin_User(name, age) {}

const u1 = new Thin_user(...)
const u2 = createObject(Thin_User, ...a\)

初步模拟

根据上面分析,createObject编写的大致步骤为:

  • 创建一个新对象obj
  • 设置obj.__proto__->constructor.prototype(但JavaScript不推荐直接修改__proto__属性,提供了setPrototypeOf方法来专门修改原型)
  • 使用constructor.call/apply(obj, ...),将属性添加到obj
  • 返回obj

__proto__和prototype,可以看JavaScript之彻底理解原型与原型链
call/apply,可以看JavaScript之手撕call、apply

学习完这些,我们就可以编写第一版代码:

function createObject(Con) {
    // 创建新对象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 将obj.__proto__ -> 构造函数原型
    // (不推荐)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 执行构造函数
    Con.apply(obj, [].slice.call(arguments, 1));

    // 返回新对象
    return obj;
}

返回值效果

众所周知,函数是有返回值的,那构造函数如果有返回值,最终执行new后返回的结果是怎样的那?

返回值为基本类型

假设构造函数返回值为一个基本类型,我们来看一下最后的返回结果:

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return 'i will keep thin forever';
}

Thin_User.prototype.eatToMuch = function () {
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch(); 

最后的返回结果好像受到任何干扰,难道构造函数不会对返回值进行处理吗?

不急,我们来接着测试一下返回值为对象的情况。

返回值为对象

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return {
        name: name,
        age: age * 10,
        fat: true
    }
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做梦吧,留下肥胖的泪水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Error: xiaobao.eatToMuch is not a function
xiaobao.eatToMuch();

当我执行eatToMuch时,控制台直接报错,没有当前函数,于是我打印了xiaobao对象:
在这里插入图片描述

发现xiaobao对象的age发生了改变,而且增加了fat属性,正好与构造函数的返回值一样。

看完这两个例子,基本可以理清构造函数有返回值的情况:当构造函数返回值为对象时,直接返回这个对象。

终版模拟

function createObject(Con) {
    // 创建新对象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 将obj.__proto__ -> 构造函数原型
    // (不推荐)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 执行构造函数,并接受构造函数返回值
    const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // 若构造函数返回值为对象,直接返回该对象
    // 否则返回obj
    return typeof(ret) === 'object' ? ret: obj;
}

点击全文阅读


本文链接:http://zhangshiyu.com/post/35991.html

函数  构造  对象  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 重生后,我笑送全班去三亚毕业旅行前言+后续+结局(徐凯)
  • 我怀孕后,患者要求我打掉孩子帮她后续结局_许燕徐燕高分神作_小说后续在线阅读_无删减免费完结_
  • 全书浏览重生后联姻丈夫爱上KTV小妹,我死遁了(姜满裴聿琛温舒柠)_重生后联姻丈夫爱上KTV小妹,我死遁了(姜满裴聿琛温舒柠)全书结局
  • 时筠荣景琛小说(荣少的步步沦陷)外篇+结局(时筠荣景琛)全篇在线阅读
  • 重生在高考前,我笑着送小青梅和小混混去庆祝成人礼老书虫(沈晏安乔念),重生在高考前,我笑着送小青梅和小混混去庆祝成人礼老书虫
  • 送子观音优质(殷茵程沐白)全书免费_(殷茵程沐白)送子观音优质后续(殷茵程沐白)
  • 重生后,我笑送全班去三亚毕业旅行推荐_徐凯沈清别以为阅读_小说后续在线阅读_无删减免费完结_
  • 北风秋霜覆往忆完结+结局+番外(傅砚寒沈沐柒)全书浏览_北风秋霜覆往忆完结+结局+番外全书浏览
  • 小说大结局小说罗毅小说已更新+特别篇(转职神级辅助,转身上报国家!)纯净版
  • 碎骨揉香与君长诀精修版(褚明意萧鹤明)全书浏览_碎骨揉香与君长诀精修版全书浏览
  • 只因一块表,闺蜜害死我全家热门榜首_陆哲轩李俏陆少爆火全网_小说后续在线阅读_无删减免费完结_
  • 折寒枝簪起霜思全章+后续+结局(宋闻璟沈棠眠)_折寒枝簪起霜思全章+后续+结局(宋闻璟沈棠眠)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1