js之this练习

发表于


1、this

1、js面试题目
1
2
3
4
5
6
7
8
9
var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window
2、解题原理

首先需要从函数的调用开始讲起。JS（ES5）里面有三种函数调用形式：

1
2
3
1、func(p1, p2) //语法糖
2、obj.child.method(p1, p2)   //语法糖
3、func.call(context, p1, p2) // 先不讲 apply

3才是正常调用形式，用3表示1,2：

1
2
3
4
5
func(p1, p2) 等价于
func.call(undefined, p1, p2)

obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)

至此我们的函数调用只有一种形式：

1
func.call(context, p1, p2)  //context就是this

3、开始解题
1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
  foo: function(){
    console.log(this)
  }
}
obj.foo() 
等价于
function func(){
  console.log(this)
}

func.call(obj)