摘要:使用将的改为了对象上面这个例子可以很直观地理解的工作原理。所以在执行时,函数内部的则会自动指向。这是一个非常好理解的例子。当执行这个方法时,获得的属性和方法。因此执行时返回。这证明了我们上面的推理是正确的。
js中一个主要的内容就是this的指向问题.
apply() 和 call() 这两个方法有共同之处也有不同之处
共同之处
他们都能改变this的指向,都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。
说到他们的功能,我就拿call来举例子吧,因为他们的功能是一致的。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
call()方法就是用来代替另一个对象来调用这个方法。call()将一个函数的对象上下文从初始的变为新定义的新对象thisObj。如果没有这个对象,那么就用global来代替.
不同之处
不同之处在于他们传值的方式不同
apply和call两者在作用上是相同的,但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如 func.call(func1,var1,var2,var3)对应的 apply 写法为:func.apply(func1,[var1,var2,var3])。
function sayName(){ alert(this.name); } var p = { name: "zjj" }; sayName.call(p); // zjj //使用call将sayName的this改为了p对象
上面这个例子可以很直观地理解 call 的工作原理。也就是说,当在函数中调用 call 这个方法时,函数内部的 this 对象会自动指向 call 方法中的第一个参数。在上面这个例子中也就是 peter 这个对象了。所以在执行 sayName.call(peter) 时,函数内部的 this.name 则会自动指向 peter.name 。故最终结果为 peter。这是一个非常好理解的例子。接下来来看较为复杂的情况。
call()
function person(){ this.name = "zjj"; this.say = function() { console.log(this.name); } } function person1(){ this.name = "zmf"; } var sm = new Person1(); person.call(sm); //将person的this指向改为了sm sm.say(); // 这里之所以能使用say,是因为现在sm指向了person,有say这个方法;
window.color = "red"; document.color = "yellow"; var s1 = {color: "blue" }; function changeColor(){ console.log(this.color); } changeColor.call(); //red (默认传递参数) changeColor.call(window); //red changeColor.call(document); //yellow changeColor.call(this); //red changeColor.call(s1); //blue
// 在call中传入函数 function class1 () { this.message = "yeah"; } function class2 () { this.sayMessage = function () { alert(this.message); } } class2.call(class1); // 可以理解为class2给了class1; alert(class1.sayMessage); // 因为即使是将class2的给了class1,但是sayMessage中的this.message仍然还是class2的。 class1.sayMessage(); //undefined
var message = "hi"; function class1 () { this.message = "yeah"; } function class2 () { this.message = "hello"; this.sayMessage = function () { alert(this.message); } } class2.call(class1); alert(class1.sayMessage); class1.sayMessage(); // hello class1.message = "msg"; class1.sayMessage(); //msg
第一次调用 sayMessage 方法,返回 hello 。我们再来看一下 class2.call(class1) 这个过程。当执行这个方法时,class1 获得 class2 的 message 属性和 sayMessage 方法。所以此时有 class1.message = "hello" ,class1.sayMessage = function () {alert(this.message)}。因此执行 sayMessage 时返回 hello。当我们手动修改 class1.message 时,再调用这个方法,返回的值为我们修改的值。这证明了我们上面的推理是正确的。
apply()
function add(c,d){ return this.a + this.b + c + d; } var s = {a:1, b:2}; console.log(add.call(s,3,4)); // 1+2+3+4 = 10 console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94992.html
apply 与 call 介绍 function f1(x, y) { console.log(结果是: + (x + y) + this); } f1(10, 20); //函数的调用 // 结果是:30[object Window] // 此时的 f1 实际上是当作对象来使用的,对象可以调用方法 f1.apply(); // 结果是:NaN[object Window] f1.ca...
摘要:的作用在中,方法和方法都是为了改变函数运行时上下文而存在的,换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误,如有错误我会及时改正。 写在前面: 隔了很长时间了,也不知道写点什么。最近一直在研究ES6,一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。 call、apply的作用 在JavaScript中,call()方法和apply()方法都是为了...
摘要:三个方法的作用,都是改变的指向,只是用法稍微有些区别什么是既不指向函数自身,也不指函数的词法作用域。它在函数定义的时候是确定不了的在函数被调用时才发生的绑定,也就是说具体指向什么,取决于你是怎么调用的函数。 1.排序法 思路:给数组先排序(由大到小排序),第一项就是最大值 let arr = [1,5,6,7,9,20,40,2,3]; let max1 = arr.sort(func...
摘要:本文总结了的各种情况,并从规范的角度探讨了的具体实现,希望对大家理解有所帮助。规范规范里面详细介绍了的实现细节,通过阅读规范,我们可以更准确的理解上述四种情况到底是怎么回事。由于本人能力有限,如有理解错误的地方还望指出。 this是面向对象编程中的一个概念,它一般指向当前方法调用所在的对象,这一点在java、c++这类比较严格的面向对象编程语言里是非常明确的。但是在javascript...
摘要:深入浅出的理解问题的由来写法一写法二虽然和指向同一个函数,但是执行结果可能不一样。该变量由运行环境提供。所以,就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。 深入浅出this的理解 问题的由来 var obj = { foo: function(){} } var foo = obj.foo; // 写法一 obj.foo(); // 写法二 foo...
阅读 2946·2021-11-22 15:25
阅读 2240·2021-11-18 10:07
阅读 1045·2019-08-29 15:29
阅读 472·2019-08-29 13:25
阅读 1503·2019-08-29 12:58
阅读 3201·2019-08-29 12:55
阅读 2911·2019-08-29 12:28
阅读 500·2019-08-29 12:16