您的位置:首页 > 移动开发

关于apply和call的一点记录

2017-11-06 13:56 330 查看
    JavaScript高级知识里面,原型链,apply,call这些都陆陆续续在看,但是一直迷迷糊糊,反省了一下是因为自己只是看而没有去理解,记录,所以从现在开始记录一下学到的(估计也是到处复制粘贴别人的...),以后发现记录有错还能回来改正,希望早日理解JavaScript高级知识。
MDN中查看:Function.prototyle.apply(obj, args):apply接收2个参数,obj指的是在函数运行时指定的this,但是指定的this值不一定是函数执行的真正的this值,如果函数处于
非严格模式下(严格模式:‘"use strict"),当obj为null或者undefined使指向全局对象,同时值为原始值的this会指向原始值(数字,字符串,布尔值)的自动包装对象。
MDN里面描述了apply的作用,对于理解这个函数很重要:
“在调用一个存在的函数时,你可以为其指定一个 
this
 对象。 
this
 指当前对象,也就是正在调用这个函数的对象。 使用 
apply
, 你可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。”
字面意思可以理解,但是还是感觉不够具体,于是去搜索了一下,发现知乎有个回答很简洁点击打开链接
明白this 是个参数,然后就好理解了:普通的函数调用隐式传入 this,call 和 apply 可以显式指定它

function cat(){
}
cat.prototype = {
food:"fish",
say:function(){
alert("I LOVE "+this.food);
}
}
var blackCat = new cat;
blackCat.say();

但是如果我们有一个对象whiteDog = {food:"bone"},我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

所以,可以看出call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

由此可以看出,blackCat.say.call(whiteDog)是以whiteDog为this执行blackCat.say方法。所以上述代码运行结果是先弹出"I LOVE fish"再弹出"I LOVE bone", 突然有一点领悟了哈。
这里还有一个操作DOM的例子,也是来自知乎:

call和apply可以用来重新定义函数的执行环境,也就是this的指向。通过一个操作DOM的例子来理解。
function changeStyle(attr, value){
    this.style[attr] = value;
}
var box = document.getElementById('box');
window.changeStyle.call(box, "height", "200px");
call中的第一个参数用于指定将要调用此函数的对象,在这里,changeStyle函数将被box对象调用,this指向了box对象,如果不用call的话,程序报错,因为window对象中没有style属性。
apply的用法:
window.changeStyle.apply(box, ['height', '200px']);

apply接受的是数组参数,call接受的是连续参数。
先大概记录这些吧。
2018-3-1更新
function Pet(words) {
    this.words = words;
    this.speak = function () {
        console.log(this.words);
    }
}

function Dog(words) {
        Pet.call(this, words);
        //Pet.apply(this, arguements);
}

var dog = new Dog('Wang');

dog.speak();
看到这样一段代码,对Pet.call(this, words);暂时无法参透,记录一下以后理解了更新。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: