js 的this

js的this应该是不好掌握又必须要掌握的东西

主要参考：

http://www.cnblogs.com/pssp/p/5216085.html

http://www.cnblogs.com/front-Thinking/p/4364337.html

http://www.cnblogs.com/penghuwan/archive/2017/08/14/7356210.html

这两天有点时间，将关键点整理下，做个记录：

 

原则1：this跟函数在哪里定义没有关系，函数在哪里调用，谁调用了，才决定this引用了哪里。

var o = { 
    user : "user", 
    fn : function(){ 
        console.log(this.user); //user 
    }
} 

o.fn();

 

原则2：函数中的this总是指向调用它的对象，当没有明确的调用对象时，将对函数的this默认绑定到全局的window对象。

<script lang="javascript">
function fn(){      
    console.log(this === window);
} 

fn(); // 输出true
</script>

 

原则3：凡是函数作为独立函数调用，无论他位置如何，他的行为表现如何，都和直接在全局环境中调用无异。

其中原则2和3是类似的，在这里牵扯了函数的作用域。

function fn(){
    var a = 1;  
    function inner(){
        console.log(this.a);
    }
    inner();
}
var a = 2;
fn();//2

 

特例1：当this遇到return时，如果返回值是一个对象那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

//-- 对象 -----------------------
function fn(){ 
    this.user = 'user'; 
    return {}; 
} 

var a = new fn(); 
console.log(a.user); //undefined

//-- 简单值 ----------------------
function fn(){ 
    this.user = 'user'; 
    return 1; 
} 

var a = new fn(); 
console.log(a.user); //user

 

 

特例2：如果传递至为简单值，那么后台会自动转换为对应的封装对象，如果传递为null，那么结果就是在绑定默认全局变量。

function fn(){
  console.log(this.a);
}

var obj = {a:2};

var a = 10;

fn.call(null);//10