JavaScrip中this、call方法、apply方法、bind方法总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weijizhu1000/article/details/80681680

在Javascript中this总是指向调用它所在方法的对象。因为this是在函数运行时,自动生成的一个内部对象,只能在函数内部使用。

1.全局的函数调用
function showFullName() {
    this.firstName = "Lily"
    this.lastName = "Jams"
    console.log(this.firstName + " " + this.lastName);
}
showFullName();  // Lily Jams

showFullName()是全局性的方法,属于全局性调用,因此this就代表全局对象window。

2.对象函数调用
var person = {
    firstName: "Lily",
    lastName: "Jams",
    showFullName: function () {
        console.log(this.firstName + " " + this.lastName);
    }
}
person.showFullName(); // Lily Jams

showFullName函数作为person对象的方法调用,this指向的是这个上级对象,即调用方法的对象person。

3.构造函数的调用
function Person() {
    this.firstName = "Lily"
    this.lastName = "Jams"
}
var person = new Person();
console.log(person.firstName + " " + person.lastName); // Lily Jams

构造函数中的this指向新创建的对象本身。

4.当使用this的方法被用作回调函数时
var person = {
    firstName: "Lily",
    lastName: "Jams",
    showFullName: function () {
        console.log(this.firstName + " " + this.lastName);
    }
}
function printName(object) {
    object();
}
printName(person.showFullName); //  undefined undefined

printName方法属于全局window对象,当将person.showFullName方法作为其方法的回调函数传入,person.showFullName方法里的this将不再指代person对象,而是指向window对象,所有firstName、lastName为undefined。
结论:当上下文环境改变时,this关键词不再指代原对象,而是指代调用该方法的对象。
那么当使用this的方法被用作回调函数时,获取正确值的方式,使用call()、apply()、bind()方法给this设置特定的值

printName(person.showFullName.bind(person)); // Lily Jams
5.当this被用于闭包函数时
var person = {
    name: "Lily Jams",
    parents: [{type: "Father", name:"Steven Jams"}, {type: "Mother", name:"Susan Jams"}],
    showParent: function () {
        this.parents.forEach(function (item) {
            console.log(this.name + " " + item.type + " name is " +  item.name);
        });
    }
}
person.showParent(); // undefined Father name is Steven Jams
                     // undefined Mother name is Susan Jams

闭包使用this关键词无法访问外部函数的this变量。要获取到正确的值,需在闭包函数外部将this赋值给其他变量

var person = {
    name: "Lily Jams",
    parents: [{type: "Father", name:"Steven Jams"}, {type: "Mother", name:"Susan Jams"}],
    showParent: function () {
        var that = this;
        this.parents.forEach(function (item) {
            console.log(that .name + " " + item.type + " name is " +  item.name);
        });
    }
}
person.showParent(); // Lily Jams Father name is Steven Jams
                     // Lily Jams Mother name is Susan Jams
6. 当this被用于使用apply()、call()方法调用时

apply和call都是为了改变函数体内部的this指向。 其具体的定义如下:
call方法:
语法:call(thisObj,Object)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

var personAction = {
    showParent: function (params) {
        console.log("Person name is " + this.name)
        this.parents.forEach(function (item) {
            console.log(item.type + " name is " +  item.name);
        });
        console.log("params " + params)
    }
}

var person = {
    name: "Lily Jams",
    parents: [{type: "Father", name:"Steven Jams"}, {type: "Mother", name:"Susan Jams"}],
}

personAction.showParent.call(person, "hahahahahah.....");
// Person name is Lily Jams
// Father name is Steven Jams
// Mother name is Susan Jams
// params hahahahahah.....
阅读更多

扫码向博主提问

朱建伟

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Android
  • React
  • NodeJS
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页