8.this

1.举例说说apply方法和call方法的作用和区别

2.读下面代码，写程序结果

function identify () {
  return this.name.toUpperCase()
}

function speek () {
  var greeting = 'hello, 我是' + identify.call(this)
  console.log(greeting)
}

var p1 = {
  name: 'xiaoHong'
}
var p2 = {
  name: 'XiaoLi'
}
identify.call(p1)   // 输出？
identify.call(p2)   // 输出？
speek.call(p1)      // 输出？
speek.call(p2)      // 输出？

3.读下面代码，写程序结果

function foo (num) {
  console.log('foo:' + num)
  this.count++
}
foo.count = 0
for (var i = 0; i < 10; i++) {
  if ( i > 5) {
    foo(i)
  }
}
console.log('foo.count被调用了多少次?:'+foo.count)

4.this到底是什么？

1、this的绑定和函数的声明位置没有关系，只取决于函数的调用方式
2、当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里调用、函数的调用方式、传入的参数等信息，this就是这个活动记录的一个属性，会在函数执行的过程中用到

5.读下面代码，写出运行结果(知识点，默认绑定)

function foo () {
  console.log(this.a)
}
var a = 2
foo()   //输出？
function foo () {
  "use strict"
  console.log(this.a)
}
var a = 2
foo()  // 输出？

function foo () {
  console.log(this.a)
}
var a = 2
;(function () {
  "use strict"
  foo()
})()

6.读下面代码，写出运行结果(知识点，隐式绑定)

function foo () {
  console.log(this.a)
}
var obj = {
  a: 2,
  foo: foo
}
obj.foo()  // 输出？

function foo () {
  console.log(this.a)
}
var obj2 = {
  a: 42,
  foo: foo
}
var obj1 = {
  a: 2,
  obj2: obj2
}
obj1.obj2.foo() //输出？

7.读下面代码，写出运行结果(知识点，绑定丢失)

function foo () {
  console.log(this.a)
}
var obj = {
  a: 2,
  foo: foo
}
var bar = obj.foo
var a = '我是全局属性a'
bar()  //输出？

function foo () {
  console.log(this.a)
}
function doFoo (fn) {
  fn()
}
var obj = {
  a: 2,
  foo: foo
}
var a = '我是全局变量a'
doFoo(obj.foo)  //输出？

function foo () {
  console.log(this.a)
}
var obj = {
  a: 2,
  foo: foo
}
var a = '我是全局变量a'
setTimeout(obj.foo, 100) // 输出

8.读下面代码，写出运行结果(知识点，call)

function foo () {
  console.log(this.a)
}
var obj = {
  a: 2
}
foo.call(obj)  //输出多少？

思考，如何解决绑定丢失问题？直接使用call方法能不能实现？

9.读下面代码，写出运行结果(知识点，硬绑定)

function foo (something) {
  console.log(this.a, something)
  return this.a + something
}
var obj = {
  a: 2
}
var bar = function () {
  return foo.apply(obj, arguments)
}
var b = bar(3)  //输出多少？
console.log(b)  //输出多少？

10.简单写一个通用的辅助函数bind

function foo (something) {
  console.log(this.a, something)
  return this.a + something
}

function bind(fn, obj) {
  // 补充代码
  ...
}
var obj = {
  a: 2
}
var bar = bind(foo, obj)

var b = bar(3)  // 2 3
console.log(b)  // 5

11.读下面代码，写出运行结果(知识点，new绑定)

function foo (a) {
  this.a = a
}
var bar = new foo(2)
console.log(bar.a) //输出多少？

12.读下面代码，写出运行结果(知识点，箭头函数的this)

function foo () {
  return (a) => {
    console.log(this.a)
  }
} 
var obj1 = {
  a: 2
}
var obj2 = {
  a: 3
}
var bar = foo.call(obj1)
bar.call(obj2)  //输出多少？

function foo() {
  setTimeout(() => {
    console.log(this.a)
  }, 100)
}
var obj = {
  a: 2
}
foo.call(obj)  //输出多少？

13.总结判断this指向的方法

1. 函数是否在new中调用？如果是的话this指向的是新创建的对象

2.函数是否通过call、apply或者硬绑定调用？如果是的话，this指向的是指定的对象

3.函数是否在某个上下文对象中调用？如果是的话，this指向的是那个上下文对象

4.如果都不是的话，使用默认绑定，如果在严格模式下，绑定到undefined，否则指向全局对象

螺钉课堂视频课程地址：http://edu.nodeing.com

js基础练习题（3）

8.this

猜你喜欢