2019 - 10 - 16 15:31:56

js中this的使用及代表意义

我们在js中经常看到this这个关键字，那么他是什么呢？它可以是全局对象、当前对象，也可以是任意对象，函数的调用方式决定了 this 的值。

( 1 ) 方法中的this。

在对象方法中， this 指向调用它所在方法的对象。例如：

示例：

var information = {
  name: "alan",
  age : "18",
  all : function() {
    return this.name + " " + this.age;
  }
};

在这里，this 表示 information 对象。all 方法所属的对象就是 information。

( 2 ) 单独直接调用this.

单独使用 this，则它指向全局(Global)对象。例如：

var name = this;
&&
"use strict";(严格模式)
var name = this;

( 3 ) 函数中调用this.

在函数中，函数的所属者默认绑定到 this 上。例如：

function information() {
  return this;
}
&&
"use strict";(严格模式)
function information() {
  return this;
}

( 4 ) 箭头函数调用this.

ES6 新增了箭头函数，箭头函数不仅更加整洁，还对 this 的指向进行了改进。箭头函数会从作用域链的上一层继承 this。

var obj = {
  y: function() {
      console.log(this === obj)

      var getX = () => {
          console.log(this === obj)
      }
      getX()
  }
}

obj.y() 
// true
// true

和普通函数不一样，箭头函数中的 this 指向了 obj，这是因为它从上一层的函数中继承了 this，你可以理解为箭头函数修正了 this 的指向。例如：

var x = 1
var obj = {
  x: 2,
  y: function() {
      var getX = () => {
           console.log(this.x)
      }
      return getX()
  }
}

obj.y()            // 2
var a = obj.y
a()               // 1

obj.y() 在运行时，调用它的对象是 obj，所以 y 中的 this 指向 obj，y 中的箭头函数 getX 继承了 y 中的 this，所以结果是 2。如果我们先将 y 赋值给全局作用域中的变量 a，a 在运行时，y 中的 this 便指向了全局对象，所以得到的结果是 1（非严格模式）。

( 5 ) js事件中调用this.　

this 指向了接收事件的 HTML 元素。例如：

1	<button onclick="this.style.display='block'">显示</button>

( 6 ) 使用call和apply

改变 this 的指向，可以使用 call 或 apply 方法，它们都可以改变函数的调用对象。将一个对象作为第一个参数传给 call 或 apply，this 便会绑定到这个对象。如果第一个参数不传或者传 null 、undefined，默认 this 指向全局对象（非严格模式）或 undefined（严格模式）。

var x = 1; 
var obj = { x: 2 } 
function getX() { 
    console.log(this.x) 
} 

getX.call(obj) // 2 
getX.apply(obj) // 2 
getX.call() // 1 
getX.apply(null) // 1 
getX.call(undefined) // 1

使用 call 和 apply 时，如果给 this 传的不是对象，JavaScript 会使用相关构造函数将其转化为对象，比如传 number 类型，会进行 new Number() 操作，传 string 类型，会进行 new String() 操作。

function demo() {
  console.log(Object.prototype.toString.call(this))
}

demo.call('hello')      // [object String]
demo.apply(5)           // [object Number]

call 和 apply 的区别在于，call 的第二个及后续参数是一个参数列表，apply 的第二个参数是数组。参数列表和参数数组都将作为函数的参数进行执行。

var x = 1
var obj = {
  x: 2
}

function getSum(y, z) {
  console.log(this.x + y + z)
}

getSum.call(obj, 3, 4)       // 9
getSum.apply(obj, [3, 4])    // 9

( 7 ) bind方法调用this.

bind 方法会创建一个新函数，新函数的 this 会永久的指向 bind 传入的第一个参数。例如:

var x = 1
var obj_1 = {
  x: 2
}
var obj_2 = {
  x: 3
}

function getX() {
  console.log(this.x)
}

var a = getX.bind(obj_1)
var b = a.bind(obj_2)

getX()           // 1
a()              // 2
b()              // 2
a.call(obj_2)    // 2

虽然我们尝试给函数 a 重新指定 this 的指向，但是它依旧指向第一次 bind 传入的对象，即使是使用 call 或 apply 方法也不能改变这一事实。

this 是 JavaScript 中非常重要的关键字，不同的运行环境和调用方式都会对 this 产生影响。理解它能让我们更熟练地使用这门语言！

---- 感谢观看 :thank you: ----