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); }
使用调用函数来为this指定上下文
1 function greet() { 2 var reply = [this.person, 'Is An Awesome', this.role].join(' '); 3 console.log(reply); 4 } 5 6 var i = { 7 person: 'Douglas Crockford', role: 'Javascript Developer' 8 }; 9 10 greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer
调用函数不指定参数(参考文中开头对参数的描述)
1 var sData = 'Wisen'; 2 3 function display(){ 4 console.log('sData value is %s ', this.sData); 5 } 6 7 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是类似数组的对象。