一、JavaScript函数this指向

 1 this的绑定规则

2 apply/call/bind

3 this绑定优先级

4 绑定之外的情况

5 箭头函数的使用

6 this面试题分

this绑定规则一-默认绑定

this绑定规则二-隐式绑定

this绑定规则三-new绑定

this绑定规则四-显式绑定

额外函数补充-apply-call

额外函数补充-bind

内置函数的调用绑定

  
  
  
  


  
  按钮

  

this绑定规则优先级

优先级从高到底：1、new；2、bind；3、call/apply；4、隐式绑定；5、默认绑定。

this绑定之外的情况

在严格模式下：显式绑定this的话，就直接指向是你绑定的内容比如null和undefined。

非严格模式：显式绑定的this，如果是null和undefined会被改为window。字符串等会包在一个对象里面。

箭头函数的使用

注意箭头函数是没有绑定this和arguments的；

且不能和new一起使用

基本使用：

箭头函数的简写

单个参数可以省略（）

一行执行体可以省略{}

一行执行体如果返回的是对象类型，则需要在对象的{}外面加一层（）

箭头函数中的this使用

由于箭头函数本身没有this，所以箭头函数里面的this会指向箭头函数外面一层的作用域的this，如果外面一层也是箭头函数，则继续向外查找作用域。对象类型的{ }花括号不是作用域，所以this在查找的时候直接跳过这里。

箭头函数使用显式绑定this也没有用。

箭头函数的this和参数的查找顺序很像。

箭头函数中的this应用

var name = "window";

var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};

function sayName() {
  var sss = person.sayName;

  sss(); // 绑定: 默认绑定, window -> window

  person.sayName(); // 绑定: 隐式绑定, person -> person

  (person.sayName)(); // 绑定: 隐式绑定, person -> person

  (b = person.sayName)(); // 术语: 间接函数引用, window -> window
}

sayName();

var name = 'window'


// {} -> 对象
// {} -> 代码块
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    // console.log(this) // 第一个表达式this -> person1
    // console.log(this) // 第二个表达式this -> person2
    // console.log(this) // 第三个表达式this -> person1
    
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }


// 开始题目:
person1.foo1(); // 隐式绑定: person1
person1.foo1.call(person2); // 显式绑定: person2

person1.foo2(); // 上层作用域: window
person1.foo2.call(person2); // 上层作用域: window

person1.foo3()(); // 默认绑定: window
person1.foo3.call(person2)(); // 默认绑定: window
person1.foo3().call(person2); // 显式绑定: person2

person1.foo4()(); // person1
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1

 

var name = 'window'

/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
function Person(name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}

// person1/person都是对象(实例instance)
var person1 = new Person('person1')
var person2 = new Person('person2')


// 面试题目:
person1.foo1() // 隐式绑定: person1
person1.foo1.call(person2) // 显式绑定: person2

person1.foo2() // 上层作用域查找: person1
person1.foo2.call(person2) // 上层作用域查找: person1

person1.foo3()() // 默认绑定: window
person1.foo3.call(person2)() // 默认绑定: window
person1.foo3().call(person2) // 显式绑定: person2

person1.foo4()() // 上层作用域查找: person1(隐式绑定)
person1.foo4.call(person2)() //  上层作用域查找: person2(显式绑定)
person1.foo4().call(person2) // 上层作用域查找: person1(隐式绑定)

因为这个函数是构造函数的形式，所以new出来的是对象类型的，类似对象里面的key和value。   

{

        name:'person1',

        foo1:函数的内存地址

}

 

var name = 'window'

/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
function Person(name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()() // 默认绑定: window
person1.obj.foo1.call(person2)() // 默认绑定: window
person1.obj.foo1().call(person2) // 显式绑定: person2

person1.obj.foo2()() // 上层作用域查找: obj(隐式绑定)
person1.obj.foo2.call(person2)() // 上层作用域查找: person2(显式绑定)
person1.obj.foo2().call(person2) // 上层作用域查找: obj(隐式绑定)