What's this?

由于运行期绑定的特性，JavaScript 中的 this 含义非常多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象

作为函数调用

• 在函数被直接调用时this绑定到全局对象。在浏览器中，window 就是该全局对象

 var a = 1
    console.log(this) //全局对象window
    function fn(){
        console.log(a) //1
        console.log(this) //window
        console.log(b) //b is nor defined
    }
    fn()

内部函数

• 函数嵌套产生的内部函数的this不是其父函数，仍然是全局变量

 function fn(){
       function fn1(){
           console.log(this) //window
       }
       fn1()
   }
   fn()

setTimeout、setInterval

• 这两个方法执行的函数this也是全局对象

document.addEventListener('click', function(e){
  console.log(this); //document
    setTimeout(function(){
        console.log(this); //window
    }, 200);
}, false);

• 如果想在setTimeout、setInterval执行的函数中返回的this是document，方法一只需要有一个中间变量，保存this即可。

 document.addEventListener('click',function(e){
       console.log(this) //document
       var _this = this
       setTimeout(function(){
           console.log(_this) //document
       })
   })

• 如果想在setTimeout、setInterval执行的函数中返回的this是document，方法二，使用bind，使其第一个参数为this

document.addEventListener('click',function(e){
        setTimeout(function(){
            console.log(this) //document
        }.bind(this))
    })

作为构造函数调用

• 所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象

new 运算符接受一个函数 F 及其参数：new F(arguments...)。这一过程分为三步：

1. 创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。
2. 初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。
3. 返回实例。

具体实例：

function People(name){
       this.name = name
   }
   People.prototype.sayName = function(){
       console.log(this.name)
   }
   var p1 = new People('lili')

• 作为对象方法调用
  在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象

var obj = {
       name: 'kasck',
       fn: function(){
           console.log(this) //obj
       }
   }
   obj.fn()

• 对象方法的嵌套

var obj2 = {
       name: 'lll',
        obj3: {
           fn: function(){
               console.log(this) // obj3
           }
        }
    }
    obj2.obj3.fn()

• 小陷阱

  var obj = {
       name: 'kasck',
       fn: function(){
           console.log(this) 
       }
   }
   obj.fn()

    var fn2 = obj.fn
    fn2() //window.fn2() this === window

Function.prototype.bind

bind:返回一个函数，并且使函数内部的this为传入的第一个参数

var obj = {
       name: 'kasck',
       fn: function(){
           console.log(this)
       }
   }
   obj.fn()
    obj3 = {a:3}
    var fn3 = obj.fn.bind(obj3) //fn3函数内部的this为bind传入的第一个参数
    fn3() // this = obj3

使用call和apply设置this

• call和apply调用一个函数传入函数执行上下文参数。

fn.call(context,parma1,parma2...);
fn.apply(context,paramArray);

语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组。

fn2.call(obj1);
fn2.apply(obj2);

• call的实例

 var value = 100;
   var obj4 = {
       value: 200
   };
    function fn4(a,b){
       console.log(this.value + a + b)
    }
    fn4(3,4) //107
    fn4.call(obj4,3,4) //207

• apply的实例

//与call对比，仅仅是调用参数的方式不同
    fn4.apply(obj4,[3,4]) 207

更多用法

function joinStr(){
        console.log(Array.prototype.join.call(arguments)) //a,b,c
        console.log(Array.prototype.join.call(arguments,'-')) //a-b-c
        var join = Array.prototype.join.bind(arguments)
        console.log(join('-')) //a-b-c
    }
   joinStr('a','b','c')

得到一个数组的最大值和最小值

    var arr = [1,3,5,9]
    console.log(Math.max.apply(null,arr)) //9
    console.log(Math.max.call(null,arr)) //NAN
    console.log(Math.max.call(null,1,3,5,9)) //9

call与apply的不同之处：

• apply:
  最多只能有两个参数：新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果argArry不是一个有效的数组或者不是arguments对象，那么将导致一个TypeError。如果没有提供argArry和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
• call：
  则是直接的参数列表，主要用在JS对象各方法互相调用的时候，使当前this实例指针保持一致或在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么Global对象将被用作thisObj。

caller

在函数A调用函数B时，被调用函数B会自动生成一个caller属性，指向调用它的函数对象，如果函数当前未被调用，或并非被其他函数调用，则caller为null

    function fn(){
        function fn1(){
            console.log(fn1.caller) //fn
        }
        fn1()
    }
    fn()

arguments

1. 在函数调用时，会自动在该函数内部生成一个名为 arguments的隐藏对象
2. 该对象类似于数组，可以使用[]运算符获取函数调用时传递的实参
3. 只有函数被调用时，arguments对象才会创建，未调用时其值为null

  function fn(name,age){
        console.log(arguments)
        var name = "frank"
        console.log(arguments)
        arguments[1] = 14
        console.log(arguments)
    }
    fn('lili',23)

函数的执行环境

一个函数被执行时，会创建一个执行环境（ExecutionContext），函数的所有的行为均发生在此执行环境中，构建该执行环境时，JavaScript 首先会创建 arguments变量，其中包含调用函数时传入的参数

接下来创建作用域链，然后初始化变量。首先初始化函数的形参表，值为 arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。

如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解JavaScript中的变量作用域非常重要，最后为this变量赋值，会根据函数调用方式的不同，赋给this全局对象，当前对象等

至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取

三种变量

1. 实例变量：（this）类的实例才能访问到的变量
2. 静态变量：（属性）直接类型对象能访问到的变量
3. 私有变量：（局部变量）当前作用域内有效的变量

function fn(){
        var a = 1 //局部变量
        this.b = 3 //实例变量
}
fn.c = 5 //静态变量

原型链

• 代码示例：

    function Person(name,age){
        this.name = name;
        this.age = age
    }
    Person.prototype.sayName = function(){
        console.log(this.name)
    }
    var p1 = new Person('lili',1);
    var p2 = new Person('llll',3);
    p1.sayName()
    p2.sayName()

• 原型图

  
  捕获.PNG

     p1.__proto__.constructor === Person
    Person.prototype.constructor === Person
    p1.constructor === Person

1. 我们通过函数定义了类Person，类（函数）自动获取属性prototype
2. 每个类的实例都会有一个内部属性__proto__，指向类的prototype·

如果想看某一个对象xx是由谁创建的，只需要看xx.proto.constructor === y,就由y创建。

原型链相关问题

有如下代码，解释Person、 prototype、proto、p、constructor之间的关联。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();

• 通过函数定义了类Person，类（函数）自动获取属性prototype；
• 每个类的实例都会有一个内部属性__proto__，指向类的prototype；
• P是构造函数Person的一个实例，p的__proto__指向了Person的prototype属性；
• prototype是构造函数内部的原型函数，所以拥有prototype和__proto__属性，其中contructor属性指向构造函数Person，__proto__指向该对象的原型。

上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

p.toString()方法是继承构造函数Object的原型对象里定义的toString()方法，首先p会找到自己的toString()方法，如果没有找到，会沿着__proto__属性继续到构造函数Person的prototype里找toString()方法，如果还是未找到，再继续往Person.prototype的__proto__找。

QQ图片20171018133901.png

原型链：由于原型对象本身也是对象，而每个JavaScript对象都有一个原型对象，每个对象都有一个隐藏的proto属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对性本身中没有找到，则会去原型链中查找，如果找到，则返回值，如果整个链都没有找到，则返回undefined。

instanceOf有什么作用？内部逻辑是如何实现的？

instanceOf：判断一个对象是否为另一个对象的实例

//
    function isInstanceOf(obj,fn){ 
        var oldProto = obj.__proto__; 
        do{ 
            if(oldProto === fn.prototype){ //prototype是小写的！ 
                return true; 
            }else{ 
                oldProto = oldProto.__proto__; 
            } 
        }while(oldProto){ 
            return false; 
        } 
    }