008 ※ 对象安全模式 | 【前辈小源登场】

不二如是

关于为什么要学习JavaScript设计模式，请看：传送门

---

上一讲最后，小不二在睡前突发奇想，对闭包有了更深层次的理解。

第二天在去公司的路上，小不二突然想起小甲鱼老师曾经说过（当时不理解）：

构建原型然后创建对象，很容易让初学者忘记使用new。

对于初学者来说，在创建对象上如果那么麻烦，肯定会出错～

毕竟没有经过工作检验的新手，总是需要一个一个错误来让自己成长。。。

记得之前看团队里其他人开发项目，小源曾经用过实时监测。

记得好像是：

JS在创建对象时有一种安全模式就是用来防止忘使用new。

很快，小不二抵达了办公室，完成了日常签到后，赶紧打开电脑，开始敲代码：

//    创建图书类
    var Book = function(title,price){
        this.title = title;
        this.price = price;
    }
    
//    实例化
    var book = Book('零基础如们学习Web（H5&C3）',55);

这样就是实例化了一个书，现在输出：

console.log(book);

果不其然，忘写new，会让对象实例化失败。

那我要这么写呢：

console.log(window.title+'：'+window.price);

咦？怎么肥四？

“小不二，早啊～”

原来是刚吃完早饭的小源也到了。

“早阿，小源前辈～”

“这么勤奋，刚到就抓紧时间调试代码阿。小伙子可以吗～”

“没有啦，只是昨天和玄武大佬学习，晚上自己在想问题的时候，发散出去了，现在正在思考您当时写的对象安全模式呢？”

“哦，多像玄武大佬学习，他的代码质量相当高呢～有什么我可以帮助你的吗？”

小源笑着对小不二说～

“嗯嗯，如果方便的话，您看下我这段代码”

边说着小不二把代码展示给小源看。

“哦哦，是的这个就是因为忘写new咯”

“嗯嗯，是的，这点我故意这么写的，但是为什么我给Book类创建的属性会添加到window上？”

“哦，是的，这个是小白很容易犯的错误，很正常哦”

小源接着说道。

“首相解决你的问题，我们要知道new关键字的作用是对当前对象的this不停的赋值，然而你并没有用new，所以就会直接执行这个函数，而此时这个函数暴露在全局环境中，所以在全局作用域中this指向的当前对象就变成了全局变量window，所有属性就变成window具有的了～”

“哦，原来如此～”小不二心里想：

前辈就是前辈，三言两语就指出核心所在，我也要变得这么强

小源接着补充到。

“你创建的book变量最终的作用是要得到Book类的执行结果，由于也没有return，Book类自然不会告诉book我的执行结果了，那么就是undefined”

“是的～”

“所以，这时候前辈用的安全模式就有必要出场了～”

“没错，安全模式就是为了防止上面的疏忽而存在的哦，技术关注于实际应用场景才有意义～”

你可以这么写：

//    创建图书类
    var Book = function(title,price){
//        安全模式
        if(this instanceof Book){
            this.title = title;
            this.price = price;
        }
        else{
            return new Book(title,price);
        }
    }

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。

通过if-else，判断执行过程中this是否是当前这个对象，是，说明是new创建的。

不是的话，证明忘写new了，手动把值return给目标变量。

输出，此时忘写new：

//    实例化
    var book = Book('零基础如们学习Web（H5&C3）',55);

    console.log(book.title+'：'+book.price);
    console.log(window.title+'：'+window.price);

“哇塞，谢谢小源前辈，我懂了～”

“加油吧，后面有好多有好东西要学呢，白天不忙的时候，可以思考思考继承～”

“好的，谢谢您了，以后还要多像您请教～”

“没问题，欢迎欢迎，不过，记得要请我吃食堂哦～”

“哈哈，一定一定！”

就这样小不二开启了一天的工作。

...

预知后事如何，请看下回分解

---

课后作业


1、忘写new，调用类实例化时，会输出什么？

2、new关键字的作用是？

3、为什么没写new，创建的类属性会被添加到window上？

4、instanceof运算符用来？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢JS-设计模式，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

优时风

111

jack6666

1