JavaScript内置对象(三):Function

API

apply

apply(this, Array)调用一个函数,第一个参数指定函数运行时的this对象,第二个参数是函数的参数。

var oDiv = document.getElementById('show');
var oBtn = document.getElementById('btn');

oBtn.onclick = throttle(buy, 1000); // onclick 如果绑定的是一个有名字的函数,该函数会立即执行,如果是一个匿名函数,则会等待绑定事件的触发

function throttle(fun, wait) { // namespace -> throttle
    var lastTime = 0; // 此命名空间下的全局变量,只初始化一次
    return function () { // 返回值函数
        var nowTime = new Date().getTime(); // 局部变量,每次执行都会初始化
        if (nowTime - lastTime > wait) {
            fun.apply(this, arguments);
            lastTime = nowTime;
        }
    }
}

function buy() {
    console.log(this, arguments);
    oDiv.innerText = parseInt(oDiv.innerText) + 1;
}

通过这个例子,我又再一次的加深了对闭包的理解:返回值是一个函数,这个函数持有当前所在函数的一切信息。

bind

bind(this[, ...arg]) 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的 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

或者指定最少参数:

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]

call

call(this[, arg]) 方法调用一个函数,

该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。

调用构造函数

function Person (name) {
    this.name = name;
    console.log(this, this.name); // window, 曾小晨
}

Person.call(window, '曾小晨');

调用匿名函数

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);
}

调用具名函数

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

参考MDN

Last modification:May 1st, 2018 at 04:28 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. kubaoya

    学习ヾ(≧∇≦*)ゝ

Leave a Comment