JS應用之call，apply

scwang90 發布于2019-08-23 12:25 / 3042人閱讀

摘要：栗子通過實現繼承等同于栗子通過實現的展開運算符功能寫法栗子通過擴展作用域作用域在作用域在作用域在作用域在，對象冒充使用或來擴充作用域的最大好處，就是對象不需要與方法有任何耦合關系。

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()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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