一、this指向问题
1、全局下指的是window
2、函数调用的情况
THIS练习题
- 1、
- 2、
- 3、
- 4、
- 5、
- 6、
- 7、
- 8、
- 9、
- 10、
- 11、
- 12、

一、this指向问题

1.在事件里面，this指的是事件前面的东西

2.普通函数看点，函数前面有点，点前面是谁，那this就是谁，没有点就是window。（严格模式下是undefined）

3.自执行函数是window，严格模式（use strict）下是undefined。

4.回调函数里面指的是window。

5.箭头函数没有this，要用的话指的是上级作用域中的this。

1、全局下指的是window

console.log(this);

2、函数调用的情况

函数执行就看函数前有没有点，如果有，点前面是谁，this就是谁，如果没有，this就是window，或者严格模式下的undefined

//'use strict'
function fn(){
  console.log(this)
}
fn();//这里的this就是window，在严格模式下就是undefined
var obj={
  name:"li",
  fn:fn,
}
obj.fn();//这里的this就是obj

自执行的函数一般是window，严格模式下是undefined

//'use strict';
(function () {
      console.log(this)//window
})()

回调函数：一般来说是window,除非在执行回调函数「内部方法」做了特殊处理

<body>
  <div id="box">11111</div>
  <script>
    box.onclick = function () {
      console.log(this)
    }
  </script>
</body>

setTimeout(function (){
   console.log(this);
}, 1000);

THIS练习题

1、

var name="珠峰培训";
function fn(){
   console.log(this.name)
}
var obj={
  name:"你好世界",
  fn:fn
}
obj.fn();
fn();
(function(){
  this.fn();
})();

答案：你好世界珠峰培训珠峰培训

2、

var a = 10;
function foo () {
  console.log(this.a)
}
foo();

答案：10

3、

var a = 10;
function foo () {
  console.log('this1', this)
  console.log(window.a)
  console.log(this.a)
}
console.log(window.foo)
console.log('this2', this)
foo();

答案：函数 window window 10 10

4、

let a = 10
const b = 20
function foo () {
  console.log(this.a)
  console.log(this.b)
}
foo();
console.log(window.a)

答案：undefined undefined undefined

5、

var a = 1
function foo () {
  var a = 2
  console.log(this)
  console.log(this.a)
}
foo()

答案：window 1

6、

var obj1 = {
  a: 1
}
var obj2 = {
  a: 2,
  foo1: function () {
    console.log(this.a)
  },
  foo2: function () {
    setTimeout(function () {
      console.log(this)
      console.log(this.a)
    }, 0)
  }
}
var a = 3
obj2.foo1()
obj2.foo2()

答案：2 window 3

7、

let obj={
  name:"li",
  fn:(function(n){
       // 这里的this
       console.log(this);
       return function(){
          // 这里的this
          console.log(this);
       }
  })(10),
}
obj.fn();

答案：window 对象obj

8、

function fn(){
  // 这里的this
  console.log(this);
}
box.onclick=function(){
    console.log(this);
    fn()
}

答案：box元素 window

9、

var num=10;
var obj={num:20};
obj.fn=(function(num){
   this.num=num*3;
   num++;
   return function(n){
       this.num+=n;
       num++;
       console.log(num);
   }
})(obj.num);
var fn=obj.fn;
fn(5);
obj.fn(10);
console.log(num,obj.num)

答案：22 23 65 30

10、

var obj = {
  name: 'obj',
  foo1: () => {
    console.log(this.name)
  },
  foo2: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var name = 'window'
obj.foo1()
obj.foo2()()

答案：window obj obj

11、

var name = 'window'
var obj1 = {
    name: 'obj1',
    foo: function () {
        console.log(this.name)
    }
}
var obj2 = {
    name: 'obj2',
    foo: () => {
        console.log(this.name)
    }
}
obj1.foo()
obj2.foo()

答案：obj1 window

12、

var name = 'window'
var obj1 = {
  name: 'obj1',
  foo: function () {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj2 = {
  name: 'obj2',
  foo: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var obj3 = {
  name: 'obj3',
  foo: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj4 = {
  name: 'obj4',
  foo: () => {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
obj1.foo()()
obj2.foo()()
obj3.foo()()
obj4.foo()()

答案：

obj1.foo()() // 'obj1' 'window'
obj2.foo()() // 'obj2' 'obj2'
obj3.foo()() // 'window' 'window'
obj4.foo()() // 'window' 'window'

JavaScript

day13