call和apply（学习笔记）

时间：2021-10-19 12:26:08

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瞬间就不开心了。

click see more

翻译都有人做好了，我就不干了，找相同和不懂好了。

相同：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是类似数组的对象。

相关文章