JS学习笔记-this对象

this对象是在运行时基于函数的运行环境绑定的；

this指向

1、函数调用

在全局函数中，this指向window。
这里的a函数是在全局环境中调用的所以是window.a()，所以this指向window，全局环境中没有name变量，所以是undifined

function a(){
var name = "sun"
console.log(this.name)        //undifined
console.log(this)             //window
};
a();

2、作为对象方法的调用

当函数被作为某个对象的方法调用时，this指向那个对象
这里a对象调用方法b，所以b中的this由a调用，所以this指向a。

var a={
    name: "sun",
    b:function () {
        alert(this.name)
      }
    }
a.b()   //sun

如果有多层对象呢？

var a = {
    name:"sun",
    b:{
       name:"xiao",
       c:function(){
         console.log(this.name)
        }
   }
};
a.b.c()    //xiao
如有多层对象，this指向它上一级的对象

3、构造函数调用

function Baby(){
this.baby="xixi"}
var new = new Baby() 
console.log(new.baby)//xixi

这里Baby是一个构造函数，创建new这个新实例，要使用new操作符，这种方式调用构造函数会经历4个步骤：
（1）创建一个新对象
（2）将构造函数的作用域赋给新对象 （this就指向这个对象了）
（3）执行构造函数中的代码 （为这个新对象添加属性）
（4）返回新对象
所以这里的new实例可以读取baby。

4、使用call（）和apply（）、bind（）调用

用途都是在特定作用域中调用函数。实际上等于设置函数体内this对象的值。
作用：传递参数，能够扩充函数赖以运行的作用域

• call（this，参数逐个列举）
• apply（this，arguments）
  传递参数

function a (num1,num2){
return num1+num2};
function b(num1,num2){
return a.call(this,num1,num2)}
console.log(b(10,10))  //20

//用apply的写法
function sum (num1,num2){
return num1+num2}
function a (a,b){
return sum.apply(this,arguments)}   //或者arguments换成[num1,num2]
console.log(a(10,10))  //20

作用：能够扩充函数赖以运行的作用域

window.color = "red";
var a ={color:"yellow"};
function scolor (){
console.log(this.color)};
scolor();         //red
scolor.call(a);  //yellow 
scolor.call(this);//red
当运行call(a)时，this指向o于是结果显示yellow。

• bind（）这个方法会创建一个函数的实例，this会被绑定到传给bind函数的值。

window.color = "red";
var a ={color:"yellow"};
function scolor (){
console.log(this.color)};
var b = scolor.bind(a);
b()//yellow

这里scolor调用了bind，传入对象o，所以this指向了o，全局中调用这个函数也是指向o的。

特殊情况

1、闭包中的this

匿名函数的执行环境具有全局性，因此this对象通常指向window。有时候编写闭包的方式不同，this指向不同。

var name = "sun"
var person = {
name:"xiao",
getname:function(){
return function(){
  return this.name
}}
}
console.log(person.getname()()) //sun
为什么不是xiao呢？

获取“xiao”的办法，变成你想要的样子：

var name = "sun"
var person = {
name:"xiao",
getname:function(){
var that = this
return function(){
  return that.name
}}
}
console.log(person.getname()()) //xiao
变量替代的方法

2、遇到return

• 如果返回值是一个对象，那么this指向的就是那个返回的对象，
• 如果返回值不是一个对象那么this还是指向函数的实例
• null也是对象，但是this还是指向那个函数的实例，因为null比较特殊。

function A(){
this.name="sun"
return {}}
function B(){
this.name="sun"
return 1}
var a=new A();
var b=new B();
console.log(a.name);    //undifined
console.log(b.name)     //sun