脚本宝典收集整理的这篇文章主要介绍了

JS中this关键字改变指向的三种方法(apply、call、bind)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

首先,了解一下this关键字。this关键字就涉及到函数调用的内容。函数的几种调用方式:

1 普通函数调用
2 作为方法来调用
3 作为构造函数来调用
4 使用apply/call方法来调用
5 Function.prototype.bind方法
6 ES6箭头函数

但是不管函数是按哪种方法来调用的,都需要记住一点:谁调用这个函数或方法,this关键字就指向谁。

普通函数调用

var age = 18;
function person(){
    this.name = "Tony";
    console.log(this);      //window
    console.log(this.name); //Tony
    console.log(this.age);  //18
}
person();

代码中定义一个普通函数person,在调用时实际上person是作为全局对象window的一个方法来进行调用的,即window.person();
因此是window对象调用了person方法,那么person函数当中的this即指window,同时window还拥有了另外一个属性name,值为“Tony”。

定义一个全局变量age,它相当于是window的一个属性。在调用person函数时它的this指向window,所以在函数内部可以访问到age变量,这也解释了函数内部可访问全局变量。

作为方法来调用

var person = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
person.showName();

var name = "Tom";
var showname = person.showName;
showname();

定义一个对象person包含一个showName的方法,在对象person内调用方法返回的是Tony,显然this指向了对象person。

再定义一个全局变量name,将person.showName方法赋值给变量showname,因为在全局定义的嘛,所以showname也相当于window的一个属性,此时调用showname它的this是指向window的,所以返回的值就是全局变量“Tom”。

var personA = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
var personB = {
    name : "Tom",
    sayName:personA.showName
}
personB.sayName();    //Tom

personB对象中的方法调用personA中的方法,虽然showName是personA中定义的,但调用了personB,那this就指向了personB。

作为构造函数来调用

function Person(name){
    this.name = name;
}
var personA = new Person("Tony");
console.log(personA.name);

构造函数new出来的实例,this指向这个实例对象。

下面就来了解一下this指向改变的三种方法。

在JavaScript中,call、apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。所以可知它们的共同点就是都用来改变函数的this对象的指向的;还有就是三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值——本次调用的上下文(context)——这就是this关键字的值。),然后再利用后续参数传参。而它们的不同也就是传参的不同,bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

apply()方法 

它接收两个参数,一个是函数运行的作用域(this),另一个是参数数组

语法:

apply([thisObj [,argArray] ]);

定义:应用某一对象的一个方法,用另一个对象替换当前对象

说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个 TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。

function Person(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Student(name){
    Person.apply(this,arguments);
}
var stu = new Student("Tony");
stu.showName();

call()方法 

它第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。

语法:

call([thisObject[,arg1 [,arg2 [,...,argn]]]]);

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明: call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象。

thisObj取值的情况:

1 不传,或者传null,undefined, 函数中的this指向window对象
2 传递另一个函数的函数名,函数中的this指向这个函数的引用
3 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 StringNumber、Boolean
4 传递一个对象,函数中的this指向这个对象

call方法的一些常见例子:

1.

function add(a,b){
    console.log(a+b);
}
function subtraction(a,b){
    console.log(a-b);
}
add.call(subtraction,3,1);    //4

定义一个加法函数、加法函数,最后的调用语句意思就是用加法替代了减法,在减法函数中通过call方法改变了this的指向,已经不再计算a-b,而是作用加法中的a+b。

2.

function Student(){
    this.name = "Tom";
    this.showName = function(){
        console.log(this.name);
    }
}
function Teacher(){
    this.name = "Tony";
}
var stu = new Student();
var tea = new Teacher();
stu.showName.call(tea);

定义一个学生函数,它有属性name和方法showName,而老师函数只有name属性,最后一个调用语句的意思就是把学生的方法用到了老师函数中执行,即便老师是没有这个方法的。

3.

function Parent(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Son(name){
    Parent.call(this,name);
}
var baby = new Son("Tony");
baby.showName();

Parent.call(this,name)意思就是使用父母这个对象替代掉儿子函数中的this对象,那么这个儿子函数中就可以直接调用父母对象中的属性和方法,这也就是继承。

bind()方法

bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值。

var person = {
    name : "Tony",
    showName : function(){
        console.log(this.name);
    }
}
person.showName();      //Tony

var name = "Tom";
var getName = person.showName;
getName();              //Tom

var boundGetName = getName.bind(person);
boundGetName();         //Tony

总结

以上是脚本宝典为你收集整理的

JS中this关键字改变指向的三种方法(apply、call、bind)

全部内容,希望文章能够帮你解决

JS中this关键字改变指向的三种方法(apply、call、bind)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过