摘要:返回值使用调用者提供的值和参数调用该函数的返回值。这个匿名函数的主要目的是给每个数组元素对象添加一个方法,这个方法可以打印出各元素在数组中的正确索引号。严格模式下,的值将会是。
Function.prototype.call() 概念
call()方法使用一个指定的this值和多带带给出的一个或多个参数来调用一个函数。
注意:该方法的语法和作用与apply()方法类似,只有一个区别,就是call()方法接受的是一个参数列表,而apply()方法接受的是一个包含多个参数的数组。
JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为:
JavaScript Demo: Function.call()
function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = "food"; } console.log(new Food("cheese", 5).name); // 输出: cheese
浅显易懂的理解,示例中表达式 Product.call(this, name, price)就等价于
this.Product(name, price)
this在此处显然指向对象Food,进一步代入this指向对象和参数为
Food.Product("cheese", 5)语法
fun.call(thisArg, arg1, arg2, ...)
语法个人理解为:
fun.call(thisArg, arg1, arg2, …) 就相当于 thisArg.fun(arg1, arg2, …)
而不论this.Arg初始指向对的是否为对象
参数:
thisArg 在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数在 [非严格模式]的this值会自动指向全局对象(浏览器中就是 window 对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。 arg1, arg2, … 指定的参数列表。
返回值:
使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值,则返回undefined。
描述:
call()允许为不同的对象分配和调用属于一个对象的函数/方法。 call()提供新的this值给当前调用的函数/方法。你可以使用call来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。示例
使用call方法调用父构造函数 在一个子构造函数中,你可以通过调用父构造函数的call方法来实现继承,类似于Java中的写法。下例中,使用Food和Toy构造函数创建的对象实例都会拥有在Product构造函数中添加的name属性和price属性,但category属性是在各自的构造函数中定义的。
function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = "food"; } function Toy(name, price) { Product.call(this, name, price); this.category = "toy"; } var cheese = new Food("feta", 5); var fun = new Toy("robot", 40);
使用call方法调用匿名函数
在下例中的for循环体内,我们创建了一个匿名函数,然后通过调用该函数的call方法,将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法,这个print方法可以打印出各元素在数组中的正确索引号。当然,这里不是必须得让数组元素作为this值传入那个匿名函数(普通参数就可以),目的是为了演示call的用法。
var animals = [ { species: "Lion", name: "King" }, { species: "Whale", name: "Fail" } ]; for (var i = 0; i < animals.length; i++) { (function(i) { this.print = function() { console.log("#" + i + " " + this.species + ": " + this.name); } this.print(); }).call(animals[i], i); }
使用call方法调用函数并且指定上下文的 "this"
在下面的例子中,当调用greet方法的时候,该方法的this值会绑定到obj对象。
function greet() { var reply = [this.animal, "typically sleep between", this.sleepDuration].join(" "); console.log(reply); } var obj = { animal: "cats", sleepDuration: "12 and 16 hours" }; greet.call(obj); // cats typically sleep between 12 and 16 hours
使用call方法调用函数并且不指定第一个参数(argument
在下面的例子中,我们调用了display方法,但并没有传递它的第一个参数。如果没有传递第一个参数,this的值将会被绑定为全局对象。
var sData = "Wisen"; function display() { console.log("sData value is %s ", this.sData); } display.call(); // sData value is Wisen
此处的理解是:display.call() 就相当于 this.display() ,非严格模式下,此处this显然指向全局window,也就等价于window.dispaly() ,也就是调用了display()。
严格模式下,this的值将会是undefined。见下文。
"use strict"; var sData = "Wisen"; function display() { console.log("sData value is %s ", this.sData); } display.call(); // Cannot read the property of "sData" of undefined
推荐阅读:
2019年前端面试题-01
2019年前端面试题-02
2019年前端面试题-03
2019年前端笔试题
我是Cloudy,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。
个人笔记,整理不易,感谢阅读、点赞和收藏。
文章有任何问题欢迎大家指出,也欢迎大家一起交流前端各种问题!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104660.html
摘要:在全局对象中调用,自然读取的是全局对象的值构造器调用说明作为构造器调用时,指向返回的这个对象。最直观的表现就是,去看一些优秀框架的源代码时,不再是被绕的晕乎乎的。 学习起因: 在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们的运用又非常的广泛。遂专门花了一天,来弄懂JavaScript的this,call,apply。中途参考的书籍也很多,以...
摘要:第四点也要着重讲下,记住构造函数被操作,要让正常作用最好不能在构造函数里 4) this、new、call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指针,从这个角度理解this指针更加有现实意义。 下面我们看看在ja...
摘要:最后重点理解结论箭头函数的,总是指向定义时所在的对象,而不是运行时所在的对象。输出,箭头函数不会绑定所以传入指向无效。原因是,要彻底理解应该是建立在已经大致理解了中的执行上下文,作用域作用域链,闭包,变量对象,函数执行过程的基础上。 本文共 2025 字,看完只需 8 分钟 概述 前面的文章讲解了 JavaScript 中的执行上下文,作用域,变量对象,this 的相关原理,但是我...
摘要:深入浅出的理解问题的由来写法一写法二虽然和指向同一个函数,但是执行结果可能不一样。该变量由运行环境提供。所以,就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。 深入浅出this的理解 问题的由来 var obj = { foo: function(){} } var foo = obj.foo; // 写法一 obj.foo(); // 写法二 foo...
摘要:的作用在中,方法和方法都是为了改变函数运行时上下文而存在的,换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误,如有错误我会及时改正。 写在前面: 隔了很长时间了,也不知道写点什么。最近一直在研究ES6,一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。 call、apply的作用 在JavaScript中,call()方法和apply()方法都是为了...
阅读 3325·2021-11-19 11:36
阅读 2926·2021-09-27 13:34
阅读 1989·2021-09-22 15:17
阅读 2402·2019-08-30 13:49
阅读 752·2019-08-26 13:58
阅读 1356·2019-08-26 10:47
阅读 2536·2019-08-23 18:05
阅读 597·2019-08-23 14:25