js 不忠诚的this

知识点: this的指向一般为调用函数的对象

var wang = {
    name:'王五花',
}

var liu = {
    name:'刘老六',
    log: function() {
        console.log(this.name)
    }
}
liu.log() // 输出 刘老六
wang.log = liu.log
wang.log() // 输出 王五花

可见, js里面的函数很不忠诚, 谁调用它, 它心理的this就是谁. 这和它在哪里创建没有关系. 相对于oc中的self指向对象本身, js中的this更像一个上下文. 使用起来也更加灵活.

call和apply :

var wang = {
    name:'王五花',
}

var liu = {
    name:'刘老六',
    log: function(str) {
        console.log(this.name + str)
    }
}
liu.log("是骗子") // 输出 刘老六是骗子
liu.log.call(wang,"是好学生") // 输出 王五花是好学生
liu.log.apply(wang,["是好学生"]) // 输出 王五花是好学生

call和apply效果是相同的,这两个函数都能够指定方法的内部this

只不过他们的传递参数的方式不同, call传递一个可变参数, 第一个参数是指定调用函数的this, 之后是方法所需的参数, 多个参数用逗号隔开, apply第一个参数与call相同, 第二个参数是一个数组, 包含要传递给函数的所有参数.

这时我有一个大胆的想法, 于是我写下了这样的代码

var wang = {
    name:'王五花',
}

var liu = {
    name:'刘老六',
    log: function(str) {
        console.log(this.log + str)
    }
}
liu.log("是骗子") 
// 输出
// function log(str) {
//    console.log(this.log + str);
// }是骗子


liu.log.call(wang,"是好学生") 
// 输出 undefined是好学生

果然没有值, 和预料的一样,

bind()

bind的主要作用也是更改方法的this指向, bind会返回一个新的函数, 这个函数的this被绑定给设置的对象

var wang = {
    name:'王五花',
}
var liu = {
    name:'刘老六',
    log: function(str) {
        console.log(this.name + str)
    }
}

liu.log("是骗子") // 输出 刘老六是骗子
liu.log =  liu.log.bind(wang);
liu.log("是好学生"); // 输出 王五花是好学生

上面的例子中, 使用bind函数, 创建一个新的函数, 并且设置这个函数的this为wang, 然后将这个函数赋值给liu这个对象, 最后虽然还是用liu这个对象调用的log函数, 但是内部的this已经更改成wang了

bind之后, 这个函数就变得很忠诚, 无论谁调用它, 它内部的this都是bind的对象.

var wang = {
    name:'王五花',
}
var liu = {
    name:'刘老六',
    log: function(str) {
        console.log(this.name + str)
    }
}
var xiao = {
    name:'小强',
}

liu.log("是骗子") // 输出 刘老六是骗子
liu.log =  liu.log.bind(wang);
liu.log("是好学生"); // 输出 王五花是好学生

xiao.log = liu.log
xiao.log("是小强吗?"); // 输出 王五花是小强吗?

这个例子中, 添加了一个新的对象xiao, xiao获取了liu的log函数, 按照最初的理解, 函数内部的this应该是xiao, 但是由于这个函数bind了wang, 它变得异常忠心, 虽然被xiao捕获并且使用了, 但是它内部this还是wang.