20190725笔记-apply详解

wzyplus 发布于2019-08-26 10:21 / 2589人阅读

摘要：语法参数这个对象将替代类里的对象可选在函数运行时使用的值。如果该参数的值为或，则表示不需要传入任何参数。更简单的讲就是将和传入函数执行。

学了那么久前端，对apply、call这两个函数的用法，还不是很掌握。
今天看了很多网上的文章，我总结和归纳下用法。

Function.prototype.apply()

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

语法

func.apply(thisArg, [argsArray])

参数

thisArg /// 这个对象将替代func类里的this对象
可选,在func函数运行时使用的this值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

argsArray // 数组、类数组。它将作为参数传到func函数中
可选的。一个数组或者类数组对象，其中的数组元素将作为多带带的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

返回值

调用有指定this值和参数的函数的结果。

示例

var array=["a","b"],
elem=[1,2,3];

array.push.apply(arry,elem);
console.log(array) // ["a","b",1,2,3]

//   定义一个Animals
    function Animals(name, kind) {
      this.name = name
      this.kind = kind
    }

    // 定义一个猫
    function Cat(name, kind, sex) {
      Animals.apply(this, arguments)
      console.log(this)  // 
      this.sex = sex
    }

    var HelloKitty = new Cat("Kitty","cat", "Female")
    console.log(HelloKitty)

最后得到的值：

这是为什么呢？

Animals.apply(this, arguments)

this
表示的是当前fn内的this，就是Cat的this

arguments
表示的是当前fn内的所传参数，即"Kitty","cat", "Female"

当参数"Kitty","cat", "Female"传入Cat中，函数利用apply函数执行Animals的内容，就是将this.name =name; this.kind = kind;作用于Cat函数内部。

更简单的讲就是将this和arguments传入Person函数执行。

现在我们来做一些改变

    function Animals(name, kind) {
      this.name = name
      this.kind = kind
    }

    // 定义一个猫
    function Cat(name, sex, kind) {
      Animals.apply(this, arguments)

      this.sex = sex
    }

    var HelloKitty = new Cat("Kitty", "Female", "cat")
    console.log(HelloKitty)

我们将Cat中的sex，kind换个位置，会得到什么结果呢？

这样就能直观展现出这个过程

   Animals.apply(this,["Kitty", "Female"])

然后进行赋值

    this.name = "Kitty"
    this.kind = "Female"

这里的this指的是Cat对象，赋值成功后，返回Cat函数，进行下一步

    this.sex ="Female";

最后得到结果

{
    name: "Kitty", 
    kind: "Female", 
    sex: "Female"
}

服务器托管私有云 apply() applied apply 中$apply

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

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

前端学习笔记之js中apply()和call()方法详解

摘要：第二行将函数的指向一个字符串第三行将函数的指向一个数字以此类推。再举一个例子实现对象继承继承了的属性和方法陈安东男姓名年龄性别输出姓名陈安东年龄性别男这样用就实现了继承用也类似这里排版不是太好，详情看我的简书经过网上的大量搜索，渐渐明白了apply()和call方法的使用，为此写一篇文章记录一下。定义 apply()方法： Function.apply(obj,args)obj：...

moven_j 2019-08-20 16:20 评论0 收藏0
Js apply()使用详解

摘要：方法详解我在一开始看到的函数和时非常的模糊看也看不懂最近在网上看到一些文章对方法和的一些示例总算是看的有点眉目了在这里我做如下笔记希望和大家分享如有什么不对的或者说法不明确的地方希望读者多多提一些意见以便共同提高主要我是要解决一下几个问题和 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply...

iOS122 2019-08-26 10:22 评论0 收藏0
《深入理解ES6》笔记——代理（Proxy）和反射（Reflection）API（12）

摘要：方法与代理处理程序的方法相同。使用给目标函数传入指定的参数。当然，不用反射也可以读取的值。的例子我们可以理解成是拦截了方法，然后传入参数，将返回值赋值给，这样我们就能在需要读取这个返回值的时候调用。这种代理模式和的代理有异曲同工之妙。反射 Reflect 当你见到一个新的API，不明白的时候，就在浏览器打印出来看看它的样子。 showImg(https://segmentfault....

ZHAO_ 2019-08-21 16:06 评论0 收藏0
《深入理解ES6》笔记——代理（Proxy）和反射（Reflection）API（12）

摘要：方法与代理处理程序的方法相同。使用给目标函数传入指定的参数。当然，不用反射也可以读取的值。的例子我们可以理解成是拦截了方法，然后传入参数，将返回值赋值给，这样我们就能在需要读取这个返回值的时候调用。这种代理模式和的代理有异曲同工之妙。反射 Reflect 当你见到一个新的API，不明白的时候，就在浏览器打印出来看看它的样子。 showImg(https://segmentfault....

CatalpaFlat 2019-08-05 11:47 评论0 收藏0
《深入理解ES6》笔记——代理（Proxy）和反射（Reflection）API（12）

摘要：方法与代理处理程序的方法相同。使用给目标函数传入指定的参数。当然，不用反射也可以读取的值。的例子我们可以理解成是拦截了方法，然后传入参数，将返回值赋值给，这样我们就能在需要读取这个返回值的时候调用。这种代理模式和的代理有异曲同工之妙。反射 Reflect 当你见到一个新的API，不明白的时候，就在浏览器打印出来看看它的样子。 showImg(https://segmentfault....

shiina 2019-08-29 13:05 评论0 收藏0