鱼C论坛

 找回密码
 立即注册
查看: 1976|回复: 2

[庖丁解牛] 008 ※ 对象安全模式 | 【前辈小源登场】

[复制链接]
发表于 2018-7-2 11:38:38 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-7-2 11:38 编辑

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




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

1.gif


第二天在去公司的路上,小不二突然想起小甲鱼老师曾经说过(当时不理解):
构建原型然后创建对象,很容易让初学者忘记使用new。


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

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

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

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


很快,小不二抵达了办公室,完成了日常签到后,赶紧打开电脑,开始敲代码:
//    创建图书类
    var Book = function(title,price){
        this.title = title;
        this.price = price;
    }
    
//    实例化
    var book = Book('零基础如们学习Web(H5&C3)',55);

这样就是实例化了一个书,现在输出:
console.log(book);
Snip20180702_295.png


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

那我要这么写呢:
console.log(window.title+':'+window.price);
Snip20180702_296.png


1.gif


咦?怎么肥四?

“小不二,早啊~”

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

“早阿,小源前辈~”

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

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

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

小源笑着对小不二说~

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

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

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

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

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

小源接着说道。

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

giphy.gif


“哦,原来如此~”小不二心里想:
前辈就是前辈,三言两语就指出核心所在,我也要变得这么强


小源接着补充到。

“你创建的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);
Snip20180702_297.png


“哇塞,谢谢小源前辈,我懂了~”

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

“好的,谢谢您了,以后还要多像您请教~”

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

“哈哈,一定一定!”

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

...

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





课后作业


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

2、new关键字的作用是?

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

4、instanceof运算符用来?



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


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



                               
登录/注册后可看大图

评分

参与人数 1荣誉 +10 鱼币 +10 贡献 +10 收起 理由
alltolove + 10 + 10 + 10 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-22 09:55:39 | 显示全部楼层
111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-10-21 20:57:35 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 02:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表