JS应用之call，apply

scwang90 发布于2019-08-23 12:25 / 3037人阅读

摘要：栗子通过实现继承等同于栗子通过实现的展开运算符功能写法栗子通过扩展作用域作用域在作用域在作用域在作用域在，对象冒充使用或来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。

call
call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

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

两者之间的区别
call()方法接受的是若干个参数的列表
apply()方法接受的是一个包含多个参数的数组。

栗子1：通过call实现继承

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0) {
    throw RangeError(
      "Cannot create product " + this.name + " with a negative price"
    );
  }
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = "food";
}

//等同于
function Food(name, price) {
  this.name = name;
  this.price = price;
  if (price < 0) {
    throw RangeError(
      "Cannot create product " + this.name + " with a negative price"
    );
  }

  this.category = "food";
}

栗子2：通过apply实现ES6的展开运算符功能

let values = [25, 50, 75, 100];

console.log(Math.max.apply(null, values));

//ES6写法
console.log(Math.max(...values));

栗子3：通过call扩展作用域

var color = "red";

let box = {
    color: "blue";
};

function sayColor() {
    alert(this.color);
}

sayColor();             //red,作用域在window
sayColor.call(this);    //red,作用域在window
sayColor.call(window);  //red,作用域在window
sayColor.call(box);     //blue,作用域在box，对象冒充

使用 call() （或 apply() ）来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。

参考链接
Function.prototype.call()
Function.prototype.apply()

GPU云服务器云服务器 js中的call和apply JS中bind、call和apply的作 apply与call的区别 js的apply()

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

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

JS之函数(1)

摘要：前言这段时间突然发现原生好多东西都忘记了但有些东西确实很重要所以又重新再梳理一次。 showImg(https://segmentfault.com/img/bVbqqkr?w=874&h=382); 前言这段时间突然发现JS原生好多东西都忘记了,但有些东西确实很重要,所以又重新再梳理一次。主要有函数的3种定义方法，ES5函数this指向，call与appl用法,JS常见的4种设计模...

宋华 2019-08-22 16:22 评论0 收藏0
前端学习笔记之js中apply()和call()方法详解

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

moven_j 2019-08-20 16:20 评论0 收藏0
JS系列之call & apply & bind

摘要：参考链接在中，和是对象自带的三个方法，都是为了改变函数体内部的指向。返回值是函数方法不会立即执行，而是返回一个改变了上下文后的函数。而原函数中的并没有被改变，依旧指向全局对象。原因是，在中，多次是无效的。参考链接：https://juejin.im/post/59bfe8... 在JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变...

xiaochao 2019-08-23 13:09 评论0 收藏0
【js基础】之this,call,apply,bind

摘要：的使用场景作为构造函数执行作为对象属性执行作为普通函数执行。要在执行时才能确认值，定义时无法确认改变上下文指向。 1.this this的使用场景： 1.作为构造函数执行； 2.作为对象属性执行； 3.作为普通函数执行； 4.call apply bind。 this要在执行时才能确认值，定义时无法确认 var a = { name:A, fn:function()...

khs1994 2019-08-22 16:47 评论0 收藏0
深入浅出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是为了改变函数运行时上下文而存在的，换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误，如有错误我会及时改正。写在前面：隔了很长时间了，也不知道写点什么。最近一直在研究ES6，一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是为了...

Cympros 2019-08-20 14:16 评论0 收藏0