系列文章目录

前端系列文章——传送门
JavaScript系列文章——传送门

this关键字

1、this关键字的含义

1.1、全局的this

console.log(this)

1.2、普通函数的this

function fn() {
    console.log(this)
}

fn()

所谓普通函数，指的是直接拿函数名称调用的函数。

1.3、自调用函数中的this

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

1.4、定时器中的this

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

1.5、事件函数中的this

<button id="btn">按钮</button>
btn.onclick = function() {
    console.log(this)
}

1.6、对象方法中的this

var obj = {
    name: '张三',
    age: 12,
    eat: function() {
        console.log(this)
    }
}

obj.eat()

2、this含义的理解

普通函数，大多都属于window的方法，所以普通函数调用就是调用window的方法；事件的绑定，其实就是在给标签对象添加方法，最终调用，其实也是在调用标签对象的方法；定时器属于window的方法，所以定时器的调用其实就是在调用window的方法

其实一个函数定义好以后，还不能确定其中的this代表什么，主要是看这个函数最终是如何调用的，例：

function fn() {
    console.log(this)
}

// 将fn当做事件处理函数
btn.onclick = fn
// 此时fn中的this就代表事件源btn

// 将fn当做定时器的处理函数
setTimeout(fn, 1000)
// 此时fn中的this就代表window

// 将fn当做对象的方法
var obj = {
    name: '张三',
    age: 12,
    eat: fn
}
obj.eat()
// 此时fn中的this就代表对象obj

根据最终的调用方式，决定最终将函数当做了什么来调用的，才能决定this关键字的含义。

3、this含义的改变

js提供了3个函数来强行修改this关键字的含义：

3.1、call方法

call方法有两个作用：调用函数以及改变函数中的this

3.1.1、调用函数

语法：

函数.call()

例：

function fn() {
    console.log(111)
}

fn() // 111
fn.call() // 111

和正常的函数调用一模一样。

3.1.2、改变this

call方法在调用函数的同时传递参数就可以改变this的含义：

函数.call(新的this含义)

例：

function fn() {
    console.log(this)
}

fn() // window
fn.call(document) // document

3.1.3、参数处理

如果被调用的函数需要实参时，call方法从第二个参数开始给函数传递实参：

函数.call(新的this含义, 实参1, 实参2, ...)

例：

function fn(a, b) {
    var c = a + b
    console.log(c)
    console.log(this)
}

fn(1, 2) // 3 window
fn.call(document, 2, 3) // document 5
fn.call(null, 5, 6) // window 11

给call传递第一个参数为null，就表示将函数中的this改为了window

3.1.4、伪数组

伪数组是一个对象。

这个对象中必须有length属性，如果length不为0，那么这个对象中必须有下标和对应的数据。

var farr = {
    0:123;
    length:1;
}

这就是伪数组。

常见的伪数组有：

arguments
DOM对象列表----HTMLCollection

伪数组转为数组的方法：将伪数组进行遍历放入数组中

3.1.5、使用场景

1. 让伪数组可以调用某些数组方法

   语法：

   数组方法.call(伪数组)
   

   例：

   var divs = document.querySelectorAll('div')
   var arr = []
   var newDivs = arr.slice.call(divs, 0)
   console.log(newDivs);
   

   通常用于将伪数组转成数组，方便调用数组方法处理元素。

   不是所有方法都可以这样做的，因为有些方法中是没有this关键字的。

2. 检测数据为对象时的精准类型

   语法：

   对象.toString.call(数据)
   

   例：

   var obj = {}
   console.log(obj.toString.call(123));
   console.log(obj.toString.call('abc'));
   console.log(obj.toString.call(true));
   console.log(obj.toString.call(undefined));
   console.log(obj.toString.call(null));
   console.log(obj.toString.call([]));
   console.log(obj.toString.call({}));
   console.log(obj.toString.call(function(){}));
   console.log(obj.toString.call(/^abc$/));
   console.log(obj.toString.call(new Date()));
   

3.2、apply方法

apply和call的作用是相同的，唯一不同的地方，在于传递实参。

call在调用函数时，给函数传递实参，是从call的第二个参数开始传递；apply给函数传递实参，是将所有实参组成一个数组作为apply的第二个参数传递的：

函数.call(新的this含义, [实参1, 实参2, ...])

例：

function fn(a, b) {
    var c = a + b
    console.log(c)
    console.log(this)
}

fn(1, 2) // 3 window
fn.apply(document, [2, 3]) // document 5

使用场景跟call也是一样的。

3.3、bind方法

bind方法有两个作用：复制函数，并改变新函数中的this。

3.3.1、复制函数

语法：

函数.bind() // 返回新函数

例：

function fn() {
    console.log(this)
}

var newFn = fn.bind()
console.log(newFn)
console.log(fn)
console.log(newFn === fn) // false

复制出来的新函数和原本的函数一模一样，但不是同一个。

3.3.2、改变新函数的this

语法：

函数.bind(新的this含义) // 返回的新函数中，this的含义会变成新的含义

例：

function fn() {
    console.log(this)
}

var newFn = fn.bind(document)
fn() // window
newFn() // document

bind不加参数，新函数的this为window：

var obj = {
    name: '张三',
    eat: function() {
        console.log(this);
    }
}
var fn = obj.eat.bind()
fn() // window

3.3.3、bind使用场景

某些函数在使用的时候，希望其中的this为其他对象，可以将原函数通过bind复制使用，并改变其中的this：

document.onclick = function() {
    setTimeout(function() {
        console.log(this)
    }, 1000)
}
// 此时this为window - 因为这是定时器中的this
// 将定时器中的this改为document
document.onclick = function() {
    setTimeout((function() {
        console.log(this)
    }).bind(this), 1000)
}