ES5的三种改变this指向的方法 以及this指向

ES5中提供了三种改变函数中this指针指向的方法,分别如下:
分别为call() apply() bind()

1.call()

var obj={name:"李四"} console.log(this) //在函数中当前的this指向全局对象,此处为window

var obj = {
    name: "张三",
    say: function (str1, str2) {
        console.log(this.name + str1 + str2)
    }
}
obj.say.call({ name: "李四" },"参数1", "参数2")  // 通过call()方法  改变当前的this指向  现指向为obj

2.apply()

var obj = {
     name: "张三",
     say: function (str1, str2) {
         console.log(this.name + str1 + str2)
     }
 }
obj.say.apply({ name: "李四" }, ["str1", "str2"])    //通过apply()方法 改变当前得this指向  现指向为obj 
1. apply()的用法与call()相似,唯一的不同在于传参的形式 apply传参方式是以数组的方式传参
2. 多个参数用逗号隔开即可 例如:
   obj.say.apply({ name: "李四" }, ["参数1", "参数2"])

3.bind()

bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的 新函数

var obj = {
        name: "张三",
        say: function (str1, str2) {
            console.log(this.name + str1 + str2)
        }
    }

  obj.say.bind({ name: "李四" }, "参数1", "参数2")()  //通过bind()方法 改变当前得this指向  现指向为obj 
   1. 不会调用原来的函数   可以改变原来函数内部的this 指向
   2. 返回的是原函数改变this之后产生的新函数
   3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind

call、apply、bind三者的异同

共同点 :

都可以改变this指向

不同点:

call 和 apply 会调用函数, 并且改变函数内部this指向.
call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
bind 不会调用函数, 可以改变函数内部this指向.

关于js中的this指向见解如下:

在函数定义的时候是无法确定this的指向 只有函数执行的时候才能确定函数的this的指向以及它的 调用者
特殊情况下 如果他的 上一级对象 对它进行调用 那么它的this指向的就是它的上级 俗称调用者 反之 如果没有对象对它进行调用 那指向就是 window

window this指向:

var name = 'jary';   //   当前 (this指向)调用者就是window      window.name = jary;

**指向上级调用者:

var a = {            //调用者 
      name:'Tom',
      say:function(){    //当前say作为(被)调用者
         console.log(this.name);  //输出结果为TOM
      }
    }
   a.say();   //当前的this指向为 a 
    var name = 'jary';    // 当前name没有上级调用 this指向为window
    var a = {
        name:'Tom',
        say:function(name){
            console.log(this.name);   //输出结果jary 因为a.say()的this指向被重新定义为window 所以它只能获取到在全局声明的name   所以指向为window        
        }
    }
     a.say(name);// name:Tom  因为还没有重定义this指向  所以当前name 指向的是函数内部的name Tom
     var f = a.say;   
     f();  //  因为a.say()该方法没有上级调用者 所以该指向为window   函数内的this是window    所以f()的调用者也是window 

你可能感兴趣的:(ES5的三种改变this指向的方法 以及this指向)