call和apply(学习笔记)
call()
call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
语法:
function.call(thisArg, arg1, arg2, ...)
参数:
thisArg:可选的。表示this修改后指向的目标。(注意:如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。)
arg1:,arg2可选的。表示函数的参数列表,表示哪些函数的属性会继承过去。
例子:
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
其他例子:
对匿名函数上使用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);
}
匿名函数使用calld代码
使用调用函数来为this指定上下文
function greet() {
var reply = [this.person, 'Is An Awesome', this.role].join(' ');
console.log(reply);
}
var i = {
person: 'Douglas Crockford', role: 'Javascript Developer'
};
greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer
调用函数为this指定上下文代码
调用函数不指定参数(参考文中开头对参数的描述)
var sData = 'Wisen';
function display(){
console.log('sData value is %s ', this.sData);
}
display.call(); //sData value is Wisen
不指定参数
call和apply的区别只是.call(this,arg1,arg2,...)是参数列表.aoply(this,[arg1,arg2,...])是参数数组,因此不再介绍。
bind()
bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。
bind语法:
fun.bind(thisArg[, arg1[, arg2[, ...]]])
参数:
thisArg:当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时,该参数无效。
arg1, arg2:当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
返回值:返回由指定的this值和初始化参数改造的原函数拷贝。
描述:
bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call属性)。当新函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。
例子:
创建绑定函数:
this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
}; module.getX(); // 返回 81 var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域 // 创建一个新函数,将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81
偏函数:
bind()的另一个最简单的用法是使一个函数拥有预设的初始参数。这些参数(如果有的话)作为bind()的第二个参数跟在this(或其他对象)后面,之后它们会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们的后面。
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
本来开开心心的翻译呢,后来发现了mdn瞬间就不开心了。
翻译都有人做好了,我就不干了,找相同和不懂好了。
相同:1、都可以改变this的指向。
2、传的参数方式一样。
不同:看上文call和bind的第一行。call是调用,bind是创建。这就决定了使用call的时候,函数会一起运行,使用bind会返回一个函数(并没有执行)。
For Example
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
console.log(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 18
}
xw.say.call(xh,"实验小学","六年级");
xw.say.bind(xh,"实验小学","六年级")();or
xw.say.bind(xh)("实验小学","六年级");
bind()() == call() ?
Function的标准方法就call()、apply()、bind()、toString(),顺便把属性也记下好了。
1、Function.length 表示函数形参的个数。
2、Function.name 表示函数的名字。
3、Function.prototype 表示函数的原型对象
Function.arguments已经废弃改为函数内部使用arguments;
arguments对象是所有(非箭头)函数中都可用的局部变量。arguments是类似数组的对象。
call和apply(学习笔记)的更多相关文章
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- Java程序猿的JavaScript学习笔记(3——this/call/apply)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- JavaScript权威设计--JavaScript函数(简要学习笔记十一)
1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...
- JavaScript权威设计--JavaScript函数(简要学习笔记十)
1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...
- 0028 Java学习笔记-面向对象-Lambda表达式
匿名内部类与Lambda表达式示例 下面代码来源于:0027 Java学习笔记-面向对象-(非静态.静态.局部.匿名)内部类 package testpack; public class Test1{ ...
- Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>
Caliburn.Micro学习笔记目录 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现 ...
- Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能
Caliburn.Micro学习笔记目录 说一下IHandle<T>实现多语言功能 因为Caliburn.Micro是基于MvvM的UI与codebehind分离, binding可以是双 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用
guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用 1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection ...
随机推荐
- VS2013 切换用户
控制面板---------------用户账户---------------凭据管理器----------------Windows凭据,可以修改和删除登录用户:根据TFS服务器的IP地址或网址或服务 ...
- [FE] 有效开展一个前端项目2 (vuejs-templates/webpack)
1.安装 nodejs.npm $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ sudo apt-get i ...
- java方法体
执行顺序: 静态代码块 mian方法 构造代码块 构造方法 静态代码块只执行一次.
- JS数组的基本操作方法
一.concat()concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3];var arr2 = [4,5];va ...
- webapi+ajax跨域问题及cookie设置
最近小玩了点东西,发现简单的东西总能遇到点问题 1.webapi跨域设置 [EnableCors(origins: "*", headers: "*", met ...
- 图解Windows 10下Visual Studio Code的下载和安装
1. 百度搜索“Visual Studio Code”,如下图所示: 2. 点击第一个搜索结果项,进入官方网站,然后点击“Download for Windows”,如下图所示: 3. 进入提示下载页 ...
- ubuntu单用户修改密码
系统版本:Ubuntu 16.04,其它版本类似. 第一步 重启 Ubuntu ,并长按shift键,进入grub菜单,上下键选择Ubuntu高级选项 第二步 上下键选择recovery mode,不 ...
- 基于SDL2实现俄罗斯方块
俄罗斯方块有多种旋转规则,我这里采用的是SRS.如果要改变旋转规则的话也很方便. SRS: 内容后续补充.. 代码:https://github.com/CknightX/sdl_Tetris 素材来 ...
- pyautogui 文档(二):鼠标控制
0,0 X increases --> +---------------------------+ | | Y increases | | | | 1920 x 1080 screen | | ...
- springboot添加自定义注解
spring拦截器是基于动态代理,注解就是拦截器,所以关于动态代理需要注意的坑,注解同样要注意. 1.创建注解类 /** * @Target 此注解的作用目标,括号里METHOD的意思说明此注解只能加 ...