张艳涛写于2020-01-25,参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数

语法

function.call(thisArg, arg1, arg2, ...)

参数

thisArg可选的。在 function 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:

如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

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';
} console.log(new Food('cheese', 5).name);

分析如下

在来看官方的第二个例子

使用 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);
}
for (var i = 0; i < animals.length; i++) {
console.log(animals[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
注意:在严格模式下,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

实际应用

function forEach(obj, fn) {
 if (isArray(obj)) {
// Iterate over array values
for (var i = 0, l = obj.length; i < l; i++) {
fn.call(null, obj[i], i, obj);
}
} else { ...}

对应

utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, config) {
return this.request(utils.merge(config || {}, {
method: method,
url: url
}));
};
});

解析

构建前端第10篇之---Function.prototype.call()的更多相关文章

  1. 构建前端第13篇之---VUE的method:{}的括号未括到方法导致 _vm.linkProps is not a function

  2. 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

    张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...

  3. 构建前端第2篇之--ESLint 配置

    张艳涛 写于2021-1-19 报错: http://eslint.org/docs/rules/space-before-function-paren Missing space before fu ...

  4. 构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>

    张艳涛写于2021-1-20日 What: 如何让button的长度和input长度一致呢 最先想到的是给这个button加一个class ="buttonclass",然后在vu ...

  5. 构建前端第9篇之(下)---vue3.0将template转化为render的过程

    vue3.0将template转化为render的过程 这里是简单标记下,如何将.vue转换成js文件 具体的,先不研究了,太深,能力有限,达不到呢

  6. 构建前端第9篇之(上)---Vue组件引入,使用

    张艳涛写于2020-1-25日 一.想写下vue引入组件和插件的理解 今天是星期一,周末也看俩两天,在这个几天了,比较迷,主要是从开始学习import指令开始的,import 是es6的语法, imp ...

  7. 构建前端第8篇之---Webstom搭建ES6运行环境

    张艳涛 写于2021-1-22 一.在有webstorm和node.js前提下,安装全局的babel npm install babel-cli babel-eslint -g 二.在terminal ...

  8. 构建前端第7篇之---elementUI设置主题,进而改变全局button底色

    张艳涛写于2020-1-20 What:是elementUI主题? 是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题 设置步骤 在路径src/styl ...

  9. 构建前端第5篇之---修改css样式的思路

    张艳涛写于2020-1-20 在页面元素布局的时候,在知道应该如何设置元素的属性的时候,可以依照如下思路,使用chrome浏览器,打开f12,找到对应的最近元素,看右侧对于的css样式窗口,调整修改数 ...

随机推荐

  1. 题解 P5318 【【深基18.例3】查找文献】

    题目传送门 根据本蒟蒻细致粗略的分析 这明显是一道水题模(du)板(liu)题 可我竟然没有一遍AC; 为更好地食用本题解需要了解以下内容 1.dfs(大法师深搜) 2.bfs(冰法师广搜)/dij最 ...

  2. JavaScript的核心语法

    1.JavaScript同其他程序设计语言一样,有着独特的语法结构,主要包含:变量.数据类型.运算符号.控制语句和注释等. 2.变量是存储数据的基本单位,JavaScript通常利用变量来参与j各种运 ...

  3. 北京某大公司:SpringBean生命周期

    <对线面试官>系列目前已经连载25篇啦!有深度风趣的系列! [对线面试官]Java注解 [对线面试官]Java泛型 [对线面试官] Java NIO [对线面试官]Java反射 & ...

  4. 四、JavaSE语言基础之运算符

    什么是是运算符 运算符:用于数据运算的符号,运算是一种处理.(注:浮点型数据(float.double)进行运算会出现精度丢失的情况) 运算符大致可分为以下六种: 一.算术运算符:+.-.*./.%. ...

  5. 深入学习Netty(2)——传统NIO编程

    前言 学习Netty编程,避免不了从了解Java 的NIO编程开始,这样才能通过比较让我们对Netty有更深的了解,才能知道Netty大大的好处.传统的NIO编程code起来比较麻烦,甚至有遗留Bug ...

  6. 树莓派4B-SPI读写flash-FM25CL16B(同时支持FM25CL64等其它系列Flash)

    1.树莓派SPI介绍 4B的引脚如下图所示: 其中Pin19.21.23是SPI0,接口定义如下所示: 时钟(SPI CLK, SCLK) 主机输出.从机输入(MOSI) 主机输入.从机输出(MISO ...

  7. gitlab hostname修改

    cd /var/opt/gitlab/gitlab-rails/etc vim gitlab.yml /home/git/gitlab/config/gitlab.yml production: &a ...

  8. java swagger ui 添加header请求头参数

    我用到的swagger 主要有三款产品,swagger editor,swagger ui 和swagger codegen. swagger editor:主要是一个本地客户端,用来自己添加api, ...

  9. php-高级计算器

    HTML代码: <!doctype html><html lang="en"><head> <meta charset="UTF ...

  10. Spring Ioc和依赖注入

    总结一下近来几天的学习,做个笔记 以下是Spring IoC相关内容: IoC(Inversion of Control):控制反转: 其主要功能可简单概述为:将 用 new 去创建实例对象,转换为让 ...