javascript关于this 以及this的显示设置(apply、call、bind)

LiveVideoStack 发布于2019-08-21 11:20 / 1038人阅读

摘要：如果连续呢结果会是什么结果还是第一个原因是，在中，多次是无效的。更深层次的原因，的实现，相当于使用函数在内部包了一个，第二次相当于再包住第一次故第二次以后的是无法生效的。

this

1.其实js中的this没那么难理解，当找不到this时记住一句话：
谁调我，我就指谁！new 谁指谁

function text1(){
    console.log(this);     //指window因为是window调我了
}
var text2={
    one:function(){
        console.log(this); //指text因为text调我，我就指它！
    }
}

function text3(){
    this.x=this;
}
var t=new text3();
   t.x;                     //指text3 new 谁指谁

apply、call

2.apply和call两个方法的作用都是改变this的指向
来个栗子：

function food(){}
food.prototype={
    color:"red",
    name:"apple",
    sayName:function(){
        console.log("my name is "+this.name); 
    }
}
var text1=new food();

text1.sayName();//my name is apple

var banana={
    name:"banana"
}
var pear={
    name:"pear"
}
text1.sayName.apply(banana); //my name is banana
text1.sayName.call(pear); //my name is pear

apply与call的作用完全一样就是接收参数的方式不同列如：

var fn=function(arg1,arg2){}
apply(fn,[arg1,arg2]);
call(fn,arg1,arg2);

那么当参数，数量固定的时候用call不固定时用apply
这里特别说下函数内的arguments对象他是一个伪数组不能直接使用push等方法
下面写几个栗子展示下他两的实际用法：

//第一个栗子追加数组
var array1=[1,2,3,4,5];
var array2=[6,7,8,9,10];
Array.prototype.push.apply(array1,array2);
array1; //[1,2,3,4,5,6,7,8,9,10]

//第二个栗子求number的最大值
var numbers=[1,10,33,100,-55,423];
Math.max.apply(Math,numbers);
Math.max.call(Math,1,10,33,100,-55,423);

//来个经常用到的代理console.log方法
function log(msg){
    console.log(msg);
}
//上面是常用的写法，但这样 我传的值是 log(1) 没毛病 如果是log(1,2,3)呢？那就有毛病了
//他不管后面传多少参数都会被舍弃掉只会打印1
//改进版本
function log(){
    console.log.apply(console,arguments);
}
//这样不管传多少个参数都能打印出来了

bind

bind() 方法与 apply 和 call 很相似，也是可以改变函数体内 this 的指向。

概念是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

var say=function(){
    console.log(this.x)
}
var one={
    x:1
}
var two={
    x:2
}
var three={
    y:3
}
var fn=say.bind(one);
fn()//1
var fn2=say.bind(two).bind(one).bind(three);//如果连续bind呢？结果会是什么？
fn2();//结果还是第一个bind

原因是，在Javascript中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。
那么call、apply、bind三者之间的区别和应用场景是什么呢？

var obj={
    x:81
}
var text={
    fn:function(){
       return this.x;
    }
}
console.log(text.fn.call(obj));//81
console.log(text.fn.apply(obj));//81
console.log(text.fn.bind(obj)());//81

结果都是81，但注意的是bind（）后面多了对调用的括号。
那么总结一下：

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；

apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；

apply 、 call 、bind 三者都可以利用后续参数传参；

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

云服务器 GPU云服务器 javascript的this JS中bind、call和apply的作 javaScript中的this javascript中this详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86574.html

关于Javascript中apply、call、bind方法说明

摘要：需要注意的是，指定的值并不一定是该函数执行时真正的值，如果这个函数处于非严格模式下，则指定为或时会自动指向全局对象浏览器中就是对象，同时值为原始值数字，字符串，布尔值的会指向该原始值的自动包装对象。 JavaScript函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply和call函数 call() 和 apply()都是为了改变某个函数运行时的...

mrcode 2019-08-20 10:14 评论0 收藏0
JavaScript初学者必看“this”

摘要：因为关键字没有处于一个声明的对象内部，默认指向全局对象。这一点可能对于大部分初学者来说有点难以理解。函数会返回一个函数，并且将绑定好。自从年双十一正式上线，累计处理了亿错误事件，得到了金山软件百姓网等众多知名用户的认可。译者按: JavaScript的this和Java等面向对象语言中的this大不一样，bind()、call()和apply()函数更是将this的灵活度进一步延伸。...

BlackMass 2019-08-20 16:49 评论0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向对象的中，我们了解到在中，一切都是对象。到目前为止，我们已将函数视为由名称可选，也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着，我们可以调用任何函数，并在调用函数中明确指定。和用于完全相同的目的。 What s this 在面向对象的JS中，我们了解到在JS中，一切都是对象。因为一切都是对象，我们开始明白我们可以为函数设置和访问其他属性。而this提供了一种更优雅的方...

WrBug 2019-08-30 15:54 评论0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向对象的中，我们了解到在中，一切都是对象。到目前为止，我们已将函数视为由名称可选，也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着，我们可以调用任何函数，并在调用函数中明确指定。和用于完全相同的目的。 What s this 在面向对象的JS中，我们了解到在JS中，一切都是对象。因为一切都是对象，我们开始明白我们可以为函数设置和访问其他属性。而this提供了一种更优雅的方...

Sike 2019-08-02 13:56 评论0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向对象的中，我们了解到在中，一切都是对象。到目前为止，我们已将函数视为由名称可选，也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着，我们可以调用任何函数，并在调用函数中明确指定。和用于完全相同的目的。 What s this 在面向对象的JS中，我们了解到在JS中，一切都是对象。因为一切都是对象，我们开始明白我们可以为函数设置和访问其他属性。而this提供了一种更优雅的方...

sarva 2019-08-23 14:11 评论0 收藏0