自己理解一下js中this指向的问题

概括

1. this永远指向的是一个对象
2. 对象的指向取决于函数调用的位置

简单理解一下, 看一个例子:

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

let obj = {
    s: "111",
    f: fun
}

let s = "222"

obj.f();  //  "111"
// 此时的fun函数是由obj对象调用, 所以此时的this指向的是对象obj,  所以this.s  -> "111"
fun();  // "222"
// 直接调用fun, 此时并没有直接的对象去调用, 所以此时this指向的是window对象

在看一个例子:

var A = {
   name: '张三',
   f: function () {
       console.log('姓名：' + this.name);
   }
};

var B = {
   name: '李四'
};

B.f = A.f;
B.f()   // 姓名：李四
A.f()   // 姓名：张三

// 因为函数在js中,是可以当做值进行传递和返回的,也可以当做对象和构造函数,所有的函数在运行的时候都需要确定当前的运行环境.
所以,this的指向会根据当前的运行环境的改变而改变.

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

var obj2 = {
    a: 2,
    fn: foo
};

var obj1 = {
    a: 1,
    o1: obj2
};
obj1.o1.fn();  // 2

对象的指向会有以下几种情况(以后再补充)

1.事件绑定中的this(行内绑定, 动态绑定, 事件监听)

行内绑定

<input type="button" value="按钮" onclick="click(this)">
// 此时this指向的本DOM节点对象
动态绑定与事件监听

<input type="button" value="按钮" id="btn">

var btn = document.getElementById('btn');
// 动态绑定
btn.onclick = function(){
    this ;  // this指向本DOM节点对象
}
// 事件监听
btn.on("click",funciton(){
    this ;  // this指向本DOM节点对象
})

2.在构造函数中

new 一个 构造函数的步骤:

在构造函数中, this 永远绑定到被实例化的对象上

function Pro(name,age){
    this.name = name
    this.age = age

    console.log(this)  // Person { name:"男人", age:10 }
}
let man = new Pro("男人",10)

console.log(man.name)  //"男人"

3.window定时器中的this

var obj = {
    fun:function(){
        console.log(this)
    }
}
setInterval(obj.fun,1000);      // this指向window对象setInterval('obj.fun()',1000);  // this指向obj对象

// 第一个在传入时, 传的是一个函数, 此时这个函数已经脱离了obj  暴露在了window环境下,换句话说, 此时的fun方法是有window调用
// 第二个在传入时, 可以看成是传入的一个js代码, 当执行这行代码时, 是通过obj这个对象找到的这个代码, 所以此时this指向obj

4.call()方法与apply()方法

使用方法: 函数名称.call(obj,params1...params5)

参数: obj: 函数内的this要指向的对象 , params 是传入的参数

let objx = {
    name: '张三'
}

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

fun(17)  // undefined/ "  "     17
fun.call(objx, 18)  //  张三   18