博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
由三道题引伸出来的思考
阅读量:6873 次
发布时间:2019-06-26

本文共 1953 字,大约阅读时间需要 6 分钟。

题目

这是在刷题遇到的题目,当时没有做对。有一些知识点没有弄懂,所以记下来,在学一下,也顺便分享到掘金,希望能帮助到别人(骗波赞)。【建议阅读时长:5min】

第一道

var a = {  n: 1}a.x = a = {  n: 2}console.log(a.x)复制代码

第二道

Object.prototype.a = 1Function.prototype.a = 2function Foo() {}var ins = new Foo()console.log(ins.a)复制代码

第三道

var a = 'outer'var obj = {  a: 'inner',  fn: function() {    console.log(this.a)  }}var wyqn = obj.fnwyqn()复制代码
  1. undefined
  2. 1
  3. outer

1.考察等号的赋值 2.考察原型的理解 3.考察 this 的理解

===========================================

===========================================

解析

第一道

等号先执行右边在等于左边

  1. a.x = a = {n:2} 等价于 a.x = ( a = { n : 2} )
  2. 得到 a.x = { n : 2 },左边第一个等号的计算结束
  3. 然后计算括号内的表达式 a = { n: 2}
  4. a 指向新的对象,{n:2},所以 a.x等于 undefined。 等价于
var a = {
n:1} var a1 = {
n:2} a.x = a1, a = a1 console.log(a.x);复制代码

===========================================

第二道

先说点题外话,我们都知道: 函数也是对象,只不过是具有特殊功能的对象而已。任何函数都可以看成是通过 Function() 构造函数的new操作实例化的结果。

构建出来的函数 Foo,指向 Function.prototype 如果把函数 Foo 当成实例对象,其构造函数是 Function() ,其原型对象是 Foo.prototype == Function.prototype;

如果把 Function 作为实例对象的话,其原型对象是什么呢? 等同于上面的理解,可以看成是 Object() 构造函数的 new 操作的实例化结果,所以其原型对象是 Object.prototype.

当你执行

var ins = new Foo();复制代码

实际上内部执行的是

var ins = new Object();ins.__proto__ = Foo.prototype;Foo.call(ins);复制代码

Object.getPrototypeOf(ins).a == Foo.prototype.a。【补充:实际上当执行ins.a相当于执行Object.getPrototypeOf(ins).a.call(ins)==Foo.prototype.a.call(ins)】

它检查 ins 是否具有 a 属性。如果没有,它会查找 Object.getPrototypeOf(ins).a,如果仍旧没有,它会继续查找 Object.getPrototypeOf(Object.getPrototypeOf(ins)).a。

补充材料:

===========================================

第三道

js里面有三种调用

func(p1, p2)obj.child.method(p1, p2)func.call(context, p1, p2)复制代码

以上三种形式,我们可能常用的会是上面两种,第三种不常用。可是第三种才是我们应该会的,其他两种只是语法糖而已。

func(p1, p2)等价于func.call(undefined, p1, p2)复制代码
obj.child.method(p1, p2)等价于obj.child.method.call(obj.method, p1, p2)复制代码

我们再来理解下: wyqn() 可以看成 wyqn.call(), 由于没有传 context.所以 this 就是 undefined。

最后浏览器会给你一个默认的 this -- window 对象。

总结

  javascript常考的点都在这三道题体现出来了,里面涉及到的一些知识点可能没有提。 包括我自己可能理解有误的地方,欢迎指出。希望能一起进步,成长。

转载地址:http://onlfl.baihongyu.com/

你可能感兴趣的文章
使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design
查看>>
Laravel+Dingo/Api 自定义响应
查看>>
【PHP 每日函数】第 01 周期
查看>>
SpiderData 2019年2月18日 DApp数据排行榜
查看>>
第十二天-《企业应用架构模式》-对象-关系结构模式
查看>>
这40款优质APP大合集,总有一个适合你!
查看>>
从理论到实践 全面理解HTTP/2
查看>>
JavaScript五十问——对比来说CSS的Grid与FlexBox(上篇)
查看>>
使用音频转换器怎么转换电影的格式?
查看>>
35. Search Insert Position
查看>>
webpack—url-loader 解决项目中图片打包路径问题
查看>>
thinkphp源码分析(四)—错误及异常处理篇
查看>>
Vue实现类似Spring官网图片滑动效果
查看>>
前嗅ForeSpider教程:数据浏览与可视化
查看>>
js 读取 input[type=file] 内容,直接显示文本 | 图片
查看>>
软件开发学习的5大技巧,你知道吗?
查看>>
每日两道前端面试题20190226
查看>>
Git常用命令总结
查看>>
python 装饰器 part1
查看>>
2018回顾
查看>>