javascript 中 this的作用域

一把情况下，函数中的this是指当前的window。

例如：

function  f1() {

return this;

}

f1() === window;

function f2() {

"use strict";     严格模式的标志

return this;

}

f2() == undefined;  在严格模式下，这里会被认为是未定义，变量必须都先要用var 声明。

作为对象方法的函数的this

var o = {   

prop:37,

f : function() {

return this.prop;

}

}

console.log( o.f() ); // logs 37

var o = {prop:37};

function independent() {

return this.prop;

}

o.f = independent();   //  临时创建对象的方法 ， 进行赋值也可以

console.log(  0.f() ); // logs 37

作为对象原型链上的this

var o = {

f : function() {

return this.a + this.b;

}

}

var p = Object.create(o);  // Object.create() 是E5的一个新特性哦，其实可以理解为继承一个对象，create方法有两个参数

一个是要继承的对象的原型，如果没有就传null，第二个参数是对象的属性描述符，这些都是E5才有的

var a = new Object();  // 创建一个对象，没有父类哦

 

var b = Object.create(a.prototype);  // b 继承了a的原型

p.a = 1;

p.b = 4;

console.log( p.f() );  // 5       这里p就继承了 o 的属性。

 get/set 方法与this,。          get/set  方法里面的this一般也会指向get/set 方法所在对象

function modulus() {

return Math.sqrt( this.re*this.re + this.im*this.im );

}

var o = {

re : 1,

im : -1,

get phase() {

return Math.atan2( this.im , this.re );

}

};

Object.defineProperty( o , 'modulus' , {                                           // 向用户定义的对象添加数据属性

get: modulus , enumerable:true , configurable:true

});

console.log( o.phase , o.modulus );  // logs -0.78 1.4142

构造器中的this

function MyClass() {

this.a = 37;

}

var o = new MyClass();   // 默认是this，如果有返回值的话则认返回值 。  用构造器来构造一个对象o，这时候  MyClass 就被当做一个空对象的方法。（原话：this指向原型为myclass  prototype属性的一个空对象）

console.log( o.a ); //37    

function C2() {

this.a = 37;

return {a:37};

}

o = new C2();

console.log( o.a ); //38

call/apply 方法与this

function add( c, d) {

return this.a + this.b + c + d;

}

var o = {a:1 , b:3};

add.call( o , 5 , 7);    // 1+3+5+7 = 16;

add.apply( o , [10 , 20] )   // 1+3+10+20 = 34

function bar() {

console.log( Object.prototype.toString.call(this) );

}

bar.call(7);  //  "[object Number]"  输出所传对象的类型   prototype：原型

bind 方法与this

function f() {

return this.a;

}

var g = f.bind( {a:"test"} );   //bind方法比call与apply更高效      这里bind内部的{a:"test"}是一个对象  ，用f对象绑定了一个对象，得到新对象g，这时候新对象的

g的this指向的就是bind的test

console.log( g() );  //test

var o = {

a:37,

f : f,

g : g

};

console.log( o.f() , o.g() );    // o.f() 的this 指向的是 o这个对象 ，至于o.g()  虽然我们把g对象当做属性赋值给了o对象，但是这里的this依然指向的是bind的 test。

// 37  "test"

===================

例：

this.x = 9;

var module = {

x:81,

getX : function(){

return this.x;

}

}

module.getX();   // 81;

var getX = module.getX ;

getX() ; // 9

var boundGetX = getX.bind(module);

boundleGetX(); //81

===================

例：  颗粒化引入原函数，并赋值

function add(a,b,c) {

return a+b+c;

}

var func1 = add.bind(undefined,100);  // 这里相当于把a赋值为100

func1(1,2); // 103 

var func2 = func1.bind(undefined,200);  // 这里相当于把b赋值为200

func2(10); // 310

===================

例：

function getConfig(colors , size , otherOptions) {

console.log(colors , size , otherOptions);

}

var defaultConfig = getConfig.bind(null , "#CC000" , "1024*768" );  // 相当于给 color 和size  赋值，这个时候defaultConfig 就类似继承了getConfig

defaultConfig("123");  //  #CC000,2024*768,123;

===================

当bind与new一块使用的时候

function foo() {
            this.b = 100;
            return this.a;
}
var func = foo.bind( {a:1} );
var res = func(); //1
console.log(res);
res = new func() //foo {b:100}  用new的时候 new出来的空对象 会指向一个没有bind的foo函数的prototype，会忽略掉return而是把对象foo 返回
console.log(res);