js中this的理解

最近写js代码的时候,很多时候会用到this,但还不是很清楚所以今天稍微总结一下,首先稍微简单区分一下js的this和jQuery中的$(this)

this是一个html元素
$(this)是一个变量名,说明是jQuery对象,即把DOM对象转换为jQuery对象\ast \ast 注\ast \ast :jQuery包装了各种浏览器版本即DOM对象的操作,因此统一使用$(this)而不用this应该是不错的选择

下面进入正题

• this总是指向调用函数的那个对象,判断this的指向,要看执行时指向哪,而不是声明时指向哪.
• this在函数式编程中很少用到,甚至用不到,在面向对象编程中用到的时候很多,this不能被赋值.

1.this和构造器

this总是挂属性/字段,方法都应在原型上

function Tab(nav, content) {
  this.nav = nav
  this.content = content
}
  
Tab.prototype.getNav = function() {
  return this.nav;
};
Tab.prototype.setNav = function(nav) {
  this.nav = nav;
};
Tab.prototype.add = function() {
};

2.this和对象

js中的对象不用类也可以创建,因为是面向对象编程而不是面向类编程

var tab = {
  nav: '',
  content: '',
  getNav: function() {
    return this.nav;
  },
  setNav: function(n) {
    this.nav = n;
  }
}

3.this和函数

this和独立的函数放在一起没有意义,一般尽量不要在纯函数中使用this,如果有时候需要使用,调用方式使用call/apply

function showMsg() {
  alert(this.message)
}
  
var m1 = {
  message: '输入的电话号码不正确'
}
var m2 = {
  message: '输入的身份证号不正确'
}
  
showMsg.call(m1) // '输入的电话号码不正确'
showMsg.call(m2) // '输入的身份证号不正确'

这中方式可以节省一定的代码量,当两个类或对象有相似方法,不必定义两个,只需要定义一个,然后将其绑定在各自的对象和原型上

4.全部环境的this

在js中,非函数内直接使用var声明的变量默认为全局变量,且默认挂在window上作为属性.

var x = 10;
function func() {
  alert(this.x)
}
var obj = {
  x: 20,
  fn: function() {
    alert(this.x)
  }
}
var fn = obj.fn
func() // 10
fn() // 10

例如这段程序的输出结果都为10,这还是一句开始强调的那句话,看执行,而不是看定义.

4.this和DOM事件

对于dom元素节点来说,它们很多的内部方法用到的this都是指向自己的,为元素节点添加事件,执行时,this指向元素节点自身.

<div id="nav"></div>
<script>
  nav.onclick = function() {
    alert(this) // 指向div#nav
  }
</script>

this可以被call和apply改变

js是动态语言,即拥有动态的数据类型,动态的函数执行和动态的方法执行,其中函数的动态执行的体现是eval,apply和call

call和apply的第一个参数为上下文的this,在this的改变上,两者没有区别

var m1 = {
  message: 'This is A'
} 
var m2 = {
  message: 'This is B'
} 
  
function showMsg() {
  alert(this.message)
}
  
showMsg() // undefined
showMsg.call(m1) // 'This is A'
showMsg.call(m2) // 'This is B'

7.ES5中新增的bind和this

bind即为cal/apply的高级版,不过低版本的IE不支持,需要修复Function.prototype

var modal = {
  message: 'This is A'
}
  
function showMsg() {
  alert(this.message)
}
  
var otherShowMsg = showMsg.bind(modal)
otherShowMsg() // 'This is A'

8.ES6箭头函数(arrow function) 和 this

判断 this 指向谁，看执行时而非定义时，只要函数(function)没有绑定在对象上调用，它的 this 就是 window
是的，前面一直用这句话来判断 this 的指向，在箭头函数里前面半句就失效了。
箭头函数的特征就是，定义在哪，this 就指向那。即箭头函数定义在一个对象里，那箭头函数里的 this 就指向该对象。

var book = {
  author: 'John Resig',
  init: function() {
    document.onclick = ev => {
      alert(this.author) ; // 这里的 this 不是 document 了
    }
  }
};
book.init()

箭头函数让 JS 回归自然和简单，函数定义在哪它 this 就指向哪，定义在对象里它指向该对象，定义在类的原型上，指向该类的实例，这样更容易理解。

小结:函数的上下文 this 是 JS 里不太好理解的，在于 JS 函数自身有多种用途。目的是实现各种语言范型（面向对象，函数式，动态）。this 本质是和面向对象联系的，和写类，对象关联一起的， 和“函数式”没有关系的。如果你采用过程式函数式开发，完全不会用到一个 this。 但在浏览器端开发时却无可避免的会用到 this，这是因为浏览器对象模型（DOM）本身采用面向对象方式开发，Tag 实现为一个个的类，类的方法自然会引用类的其它方法，引用方式必然是用 this。当你给DOM对象添加事件时，回调函数里引用该对象就只能用 this 了。