JavaScript中this的用法 及 如何改变this的指向

要懂得JavaScript中this的用法，首先需要知道，JavaScript中的作用域相关知识。

 

var fun = function(){
　var flag = 1;
　console.log(flag)；
}
var flag = 0;
fun();
console.log(flag);

 

首先看上面这段代码，结果 ： 1    0 
这个很好理解了，打印的函数内部 flag 的值为 1，全局打印 flag 的值为0。

那么再如果函数内部打印 this.flag 呢？

 

var fun = function(){
var flag = 1;
console.log(this.flag)
}
var flag = 0;
fun();
console.log(flag);

 

结果： 0    0 

this.flag 指向的是当前作用域下的 flag 值，fun() 函数在全局调用，那么作用域便为全局，而全局的 flag 值为 0，遂打印的结果便为 0

 

那么接下来看看this在不同的几种情况下的指向问题

 

注意：函数内部的this不是在函数定义时决定的，而是在函数调用时决定的
1、普通的 函数调用方式，内部this指向window（普通函数调用等于window.fun()）

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

 

var fun = function(){
    console.log(this)
}

 

var fun = function(){
    var fun2 = function(){
        console.log(this)
    }
}
(function(){
    console.log(this)
})()

fun()

 

2、定时器中的this指向window

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

 

3、构造函数中this的指向（通过new关键字调用才是构造函数）
// 在调用一个方法时，对象.方法名()；方法内部this指向调用者

function Fun(name){
    this.name = name
}
Student.prototype.fun = function(){
    console.log(this.name)
}

var fn = new Fun('Bob')
fn.fun()

 

4、事件处理程序中，this指向事件源

document.onclick = function(){
    console.log(this)
}

 

改变 this 的指向

 

1、call 方法：
语法：函数名.call(调用者，实参1，实参2……)
注意：当函数被借用时，会立即执行，并且函数体内this会指向借用者或调用者

function fun(name,age){
this.name = name
this.age = age
}

var obj = {}
fun.call(obj,'Bob',20) ; // 会立即执行一次函数，this指向obj

 

2、apply 方法：
语法：函数名.apply(调用者，[实参1，实参2……])
注意：当函数被借用时，会立即执行，并且函数体内this会指向借用者或调用者

function fun(name,age){
this.name = name
this.age = age
}

var obj = {}
fun.apply(obj,['Bob',20]) ; // 会立即执行一次函数，this指向obj

 

3、bind 方法：
语法：函数名.bind(调用者，实参1，实参2……)
注意：当函数被借用时，不会立即执行，会返回一个新的函数，并且新的函数需要我们自己调用

function fun(name,age){
this.name = name
this.age = age
}

var obj = {}
var newFun = fun.bind(obj,'Bob',20)
newFun()

 

改变 this 指向的 - 栗子

要求：伪数组运用数组的push方法：

// 数组与伪数组的相关知识准备

　　// 伪数组的特点：

　　　　// a、伪数组是一个对象

　　　　// b、这个对象必须有一个 length 属性

　　　　// c、如果这个对象的 length 不为0，那么就要有按下标存储的数据

　　　　// d、伪数组没有数组才有的一些方法，比如 push shift 等

// 【伪数组】

var nums = {
　　0:'a',
　　1:'b',
　　2:'c',
　　3:'d',
　　length:4
}

// 借用数组中的 push 方法
Array.prototype.push.call(nums,'e','f')