JavaScript this

this指向

在浏览器环境中，当前的全局this为window对象

this.document === document //true

this === window

一般函数的this，指向的是当前全局对象

• 在浏览器环境中，指向为window对象

  function fn(){
    return this
  }
  
  fn() === window //true

• 在nodejs环境中，指向为global对象

• 在严格模式中，指向为undefined

  function fn2(){
    'use strict';
    return this;
  }
  fn2() === undefined

• 作为对象方法的函数this

  var o = {
    props :37
    f:function(){
      return this.props  //此时this指向函数字面量o
    }
  }
  
  var o = {
    props : 37
  }
  
  function fn(){
    return this.props;  //此时的this指向全局的window对象
  }
  //将函数作为对象的方法，可以获取到该对象
  o.f = fn;
  console.log(o.f()); //37

• 对象原型链上的this

  //this指向实例对象
  var o = {
    f:function(){
      return this.a + this.b
    }
  }
  var obj = Object.create(o);
  obj.a = 2;
  obj.b = 1;
  obj.f(); // 3 

• get/set方法上的this

  function modulus(){
    return Math.sqrt(this.re * this.re + this.rm * this.rm)
  }
  
  var o = {
    re : 2,
    rm : 2,
    get phase(){
      return Math.atan2(this.rm,this.re)
    }
  }
  
  Object.defineProperty(o,'modulus',{
    get: modulus,
    enumerable:true,
    configurable:true
  })
  
  console.log(o.phase,o.modulus) //都可以取到值

• 构造函数上的this

  function Person(){
    this.age = '24'
  }
  var person1 = new Person(); //此时this指向到构造函数的prototype  此时Person.prototype.age
  person1.age // 24 此时this指向到实例对象的私有原型 __proto__ 可以直接拿到
  
  //如果函数有return 返回值，切返回值为一个对象并包含该属性，则返回该属性
  function Person(){
    this.age = '24'
    return {age:'25'}
  }
  var person2 = new Person();
  person2.age = 25

• call/apply方法与this

  function add(c,d){
    return this.a + this.b + c + d
  }
  
  var o = {
    a:1,
    b:2
  }
  add.call(o,3,4) //此时函数上下文this为o, 返回1+2+3+4
  add.apply(o,[3,4]) //返回1+2+3+4
  
  function bar(){
    console.log(Object.prototype.toString.call(this))
  }
  bar.call(7) // [object number]

• bind方法与this

  //bind 绑定 当前的this
  function person(){
    return this.a;
  }
  
  var g = person.bind({a:"test"})
  g() // test 通过bind绑定当前的this为一个对象
  
  var o = {
    a:36,
    f:peroson,
    g:g
  }
  o.f() // 36
  o.g() // test 仍然按照绑定的来走

call / apply 注意事项

function show(x,y){
  console.log(x,y,this)
}

show.call(100,1,2) // 1,2,100
show.apply(100,[3,4]) //3,4,100
show.call(null) //undefined undefined window 此时this为全局变量window
show.call(undefined) //undefined undefined window 此时this也指向全局变量window

//严格模式下
function show(x,y){
  'use strict'
  console.log(x,y,this)
}
show.call(null) //undefined undefined null.   undefined同理

bind方法注意事项

this.x = 20;
var module = {
  x:30,
  getX:function(){
    return this.x
  }
}
var getX = module.getX;
getX() //20 赋值到变量的时候 此时this指向到全局window对象
var boundGetX = getX.bind(module)
boundGetX() // 30 绑定到module this指向module

bind与currying

//固定某些值，然后个性化改变某几个值
function show(a,b,c){
  return a + b + c
}
var show1 = show.bind(null,2)
show1(1,2) // 2 + 1 + 2 固定a，bc个性化设置
var show2 = show1.bind(null,3)
show2(5) // 2+3+5 固定ab, c个性化设置

//举例
function getConfig(color,size,otheroptions){
     console.log(color,size,otheroptions)
}

var defineConfig = getConfig(null,'#ffffff','1024*768') //固定两个参数
defineConfig('show') // '#ffffff','1024*768',show
defineConfig('hide') //'#ffffff','1024*768',hide

bind与new

function foo(){
  this.b = 100 
  return this.a
}
var foo1 = foo.bind({a:20})
foo1() //20

new foo() // {b:100} 整个函数作为返回值返回，作为构造函数扔掉返回值，bind作用会被忽略