this指差まとめ

3042 ワード

1.オブジェクトとしてのメソッド呼び出し
thisはこのオブジェクトを指します
var obj = {
    a: 1,
    getA: function(){
        console.log(this===obj);// true
        console.log(this.a);//1
    }
}

obj.getA();
2.一般関数として呼び出される場合
thisはグローバルオブジェクトをブラウザjsに指し、グローバルオブジェクトはwindowオブジェクトを指します.
window.name = 'globalName';

var getName = function(){
    console.log(this.name);//globalName
}

var obj = {
    name: 'objName',
    getName: function(){
        console.log(this.name);
    }
}

var getName2 = obj.getName;
getName2();//  globalName
3.コンストラクタの呼び出し
1.newで関数を呼び出すと、この関数は一つのオブジェクトに戻ります.通常、コンストラクタの中のthisは戻りのこのオブジェクトを指します.
var MyClass = function(){
    this.name = 'sven';
}

var obj = new MyClass();
alert(obj.name);// sven
2.コンストラクタがobjectタイプのオブジェクトを返すと表示されたら、このオブジェクトに戻ります.thisではありません.
var MyClass = function(){
    this.name = 'sven';
    return {
        name: 'anne'
    }
};

var obj = new MyClass();
alert(obj.name);// anne
3.コンストラクタがどのデータを返しても表示されない場合、または非オブジェクトタイプのデータを返しても、上記の問題は発生しません.
var MyClass = function(){
    this.name = 'sven';
    rentun 'anne';
}

var obj = new MyClass();
alert(obj.name);// sven
4.Function.prototype.calとappy呼び出し
callとappyは着信関数のthisを動的に変えることができます.
var obj1 = {
    name: 'sven',
    getName: function(){
        return this.name;
    }
}
var obj2 = {
    name: 'anne'
}
console.log(obj1.getName());// sven
console.log(obj1.getName.apply(obj2));// anne
this修正
window.name = 'window';
var obj = {
    name: 'objName',
    getName: function(){
        return this.name;
    }
};
obj.getName();// objName
var c = obj.getName;
c();//window
//  
obj.getName = (function(fun){
    return function(){
        return fun.apply(obj)
    }
})(obj.getName);

obj.getName();//objName
var d = obj.getName;
d();//objName
5.apply、call、bind
apply(obj、[option])
call(obj、op 1、op 2)
ビッド(obj,op 1,op 2)
callとappyはすぐに実行されます.bindは新しい関数に戻ります.すぐに実行されません.bindパラメータはbind時に送ることができます.また、方法呼び出し時に送ることもできます.全部concatを着用します.
var obj1 = {
    name: 'boj1',
    getName: function(p1,p2){
        return this.name+'-'+p1+'-'+p2;
    }
}
var obj2 = {
    name: 'obj2'
}

obj1.getName.apply(obj2,[1,2]);// obj2-1-2
obj1.getName.call(obj2,1,2);// obj2-1-2
var c = obj1.getName.bind(obj2,1);
c(2);// obj2-1-2
ビッド実現
Function.prototype.bind = function(){ 
    var self = this, //      
        context = [].shift.call( arguments ),
        args = [].slice.call( arguments ); 
    return function(){ //         
                       //       this     //          
        return self.apply( context, [].concat.call( args, [].slice.call( arguments ) ) ); //          ,        context          this
                        //              ,        
    }
}
面接問題http://www.cnblogs.com/xxcanghai/p/5189353.html#!comments