call/apply/bindの理解と実例を共有する.

call/applyは、関数のthisの指向を変更することができる.パラメータを渡すときに差がある以外は、callとapplyとは全く同じ働きをしています.

var tim = { 
    name: 'tim', 
    age: 20, 
    getName: function() {
        console.log(this.name);
        return this.name; 
    }
}

var jake = { name: 'jake', age: 20 }

tim.getName(); // tim

// jake    getName  ，      call/apply   tim   getName  
tim.getName.call(jake);  // jake 
tim.getName.apply(jake); // jake

tim.getName.call(jake)は、getName方法を実行するという意味であるが、call/applyによってgetName方法のthisが、jakeオブジェクトに強制的に設定されていることを指す.だから最終的にはジャケに戻ります.call applyの違いは、伝達パラメータの形式にある.applyによって渡されるパラメータは配列形式であり、callによって渡されるパラメータは順次配列される.簡単な例を説明します.

//               apply    ,      apply
//       obj  fn，obj     fn     ，  this  obj.
var arguments = { 0:'name', 1:'age', 2:'gender' };

fn.apply(obj, arguments);
fn.call(obj, name, age, gender);

私が出会った実際の例をいくつか集めました.

は、クラス行列形式を行列

に変換する.

// arguments
//       ，arguments    
var arg = [].slice.call(arguments);

// nodeList
var nList = [].slice.call(document.getElementsByTagName('li'));

方法は

を借ります.

var foo = {
    name: 'joker',
    showName: function() {
        console.log(this.name);
    }
};
var bar = {
    name: 'rose'
};

foo.showName.call(bar); // rose

継承中のアプリケーション

// parent
var Person = function(name) {
    this.name = name;
    this.gender = ['man', 'woman'];
}

// child
var Student = function(name, age) {

    // inherit
    Person.call(this);
}
Student.prototype.message = function() {
    console.log('name:'+this.name+', age:'+this.age+', gender:.'+this.gender[0]);
}

var xm = new Student('xiaom', 12);
xm.message(); //name:undefined, age:undefined, gender:.man

パッケージオブジェクトの場合、this指向性

を保証する.

var Nicco = function(name) {
    this.name = name;
}
Nicco.prototype = function() {
    constructor: Nicco,

    message: function() {
        var _this = this;
        addEventListener(
            'mousedown',
            function() {
                // stay this
                return _this.fndown.call(_this);
            },
            false
        );
    },

    fndown: function() {
        var
            _this = this,
            str = this.name + ', i miss you.';
        addEventListener(
            'mouseup',
            function() {
                return _this.fnup.call(_this, str);
            },
            false
        );
    },

    fnup: function(str) {
        console.log(str);
    }
}