马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 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);
这样就是实例化了一个书,现在输出:
果不其然,忘写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-设计模式,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 )
|