008 ※ 对象安全模式 | 【前辈小源登场】
本帖最后由 不二如是 于 2018-7-2 11:38 编辑关于为什么要学习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);
“哇塞，谢谢小源前辈，我懂了～”
“加油吧，后面有好多有好东西要学呢，白天不忙的时候，可以思考思考继承～”
“好的，谢谢您了，以后还要多像您请教～”
“没问题，欢迎欢迎，不过，记得要请我吃食堂哦～”
“哈哈，一定一定！”
就这样小不二开启了一天的工作。
...
预知后事如何，请看下回分解{:10_303:}
课后作业
1、忘写new，调用类实例化时，会输出什么？
2、new关键字的作用是？
3、为什么没写new，创建的类属性会被添加到window上？
4、instanceof运算符用来？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢JS-设计模式，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 111 1
页:
[1]