JavaScript函数调用及函数上下文(this)

JavaScript中函数调用有如下4种方式：

1.作为一个函数直接被调用， func()。

   此时，在非严格模式中函数上下文this指向全局window;在严格模式中指向undefined

2.作为一个对象的方法调用，obj.func()。

  此时，上下文this指向这个调用它的对象obj

3.作为构造函数调用new Func()，实例化一个新的对象。

  此时，构造函数内部的this指向其实例化的对象。

function Func(name) {    this.name = name } let obj1 = new Func('zhangshan'); let obj2 = new Func('lisi');  obj1.name  // => 'zhangshan' obj2.name  // => 'lisi'

  当通过new关键字调用构造函数时会做如下操作：

      1).创建一个新的空对象。

      2).该对象作为this参数传递给构造函数，从而成为构造函数的函数上下文（构造函数的作用域赋给新对象，因此构造函数中              的 this指向了这个新对象）。

      3).以创建的对象为上下文执行构造函数中的代码（为新对象添加属性）

      4).新构造的对象作为new运算符的返回值
       注：
        a:如果构造函数返回一个对象，则该对象将作为整个表达式的值返回， 而传入构造函数的this将被丢弃。
        b.如果构造函数返回的是非对象类型，则忽略返回值，返回新创建的对象。
        c.每个函数都有一个原型对象（可以通过函数的prototype属性访问），该原型对象将被自动设置为通过该函数创建对象的原型。函数的原型可以被任意替换，已经构建的实例引用旧的原型,重新定义函数原型对已经构建的实例没有影响。

//new 操作过程可以用如下代码来表示  let obj = new Object(); Constructor = [].shift.call(arguments); obj.__proto__ = Constructor.prototype; let ret = Contructor.apply(obj, arguments); return typeof ret === 'object' ? ret : obj

function Func(name) {    this.name = name    return 1 }  let obj = new Func('zhangshan'); obj  // => 忽略构造函数中返回值1 还是返回对象 { name: 'zhangshan'};  function Func(name) {    this.name = name    return {      name: 'wang2'    } }  let obj2 = new Func('lisi); obj2 // => { name: 'wang2'} 

4.通过函数的apply或者call方法——func.apply(obj)或者func.call(obj)。

let obj1 = {   name: 'zhangshan' } let obj2 = {   name: 'lisi' }  function func(age) {   console.log(`${this.name} age ${age}`) }  func.call(obj1, 22) // => zhangshan age 22 func.call(obj2, 26) // => lisi age 26  //call, apply第一个参数是函数的上下文this //如果第一个参数是null，在非严格模式下this指向window, 严格模式下指向null //apply和call的用法是一样的除了call传递的参数必须一个一个列出来，apply是以数组形式传递参数 

在JavaScript中this的值会根据函数的调用方式不同而不同，有时候会使程序中this出现与预期不一致的情况。
决解方式有两种：使用es6的箭头函数 和 通过bind绑定上下文

function Ninja(){   this.whoAmI = () => this; } var ninja1 = new Ninja(); var ninja2 = {   whoAmI: ninja1.whoAmI };  ninja1.whoAmI() === ninja1 //true ninja2.whoAmI() === ninja2 //false   //在箭头函数中this等于函数定义时的上下文 //在这个例子中this是指向ninja1 //所以ninja2.whoAmI() 还是指向ninja1  function Ninja(){   this.whoAmI = function(){     return this;   }.bind(this); } var ninja1 = new Ninja(); var ninja2 = {   whoAmI: ninja1.whoAmI };  ninja1.whoAmI() === ninja1  // true ninja2.whoAmI() === ninja2  //false  //在实例化ninja1的时候， ninja1.whoAmI中的this被绑定为ninja1 //所以不管怎样的方式调用ninja1.whoAmI都是指向 ninja1  //注：此例摘录自 《JavaSript忍者秘籍第2版》

    const obj = {       func1() {         return this === obj       },       func2: () => this === window     }     console.log(obj.func1()) //true     console.log(obj.func2()) //true