JS-this关键字

1、定义

this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

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

function test(){ 
　　this.x = 1; 
}

2、用法

2.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.2 this 和对象

这时this就指这个上级对象。

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

2.3 this 和函数

首先，this 和独立的函数放在一起是没有意义的，前面也提到过 this 应该是和面向对象相关的。纯粹的函数只是一个低级别的抽象，封装和复用。如下：

function showMsg() {
  alert(this.message)
}
showMsg() // undefined

定义 showMsg，然后以函数方式调用，this.message 是 undefined。因此坚决杜绝在纯函数内使用 this，但有时候会这么写，调用方式使用 call/apply：

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

用这种方式可以节省一些代码量，比如当两个类/对象有一共相似的方法时，不必写两份，只要定义一个，然后将其绑定在各自的原型和对象上。这时候其实你还是在使用对象或类（方式1/2），只是间接使用罢了。

2.4 全局环境的 this

前面提到this指的是，调用函数的那个对象。全局环境中有不同的宿主对象，浏览器环境中是 window， node 环境中是 global。这里重点说下浏览器环境中的 this。

浏览器环境中非函数内 this 指向 window。

浏览器中比较坑人，非函数内直接使用 var 声明的变量默认为全局变量，且默认挂在 window 上作为属性。

var andy = '刘德华'
alert(andy === window.andy) // true
alert(andy === this.andy) // true
alert(window.andy === this.andy) // true

例如笔试题：

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。永远记住这一点：判断 this 指向谁，看执行时而非定义时，只要函数(function)没有绑定在对象上调用，它的 this 就是 window。

2.5 this 和 DOM/事件

W3C 把 DOM 实现成了各种节点，节点嵌套一起形成 DOM tree。节点有不同类型，如文本节点，元素节点等10多种。元素节点又分成了很多，对写HTML的人来说便是很熟悉的标签（Tag），如 div，ul，label 等。看 W3C 的 API 文档，会发现它完全是按照面向对象方式实现的各种 API，有 interface，extends 等。

前面说过 this 是指向当前类的实例对象，对于这些 tag 类来说，不看其源码也知它们的很多方法内部用到的 this 是指向自己的。有了这个结论，写HTML和JS时， this 就清晰了很多。

示例A：

<!-- this 指向 div -->
<div onclick="alert(this)"></div>

示例B：

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

示例C：

$('#nav').on('click', function() {
  alert(this) // 指向 nav
})

以上三个示例可以看到，在给元素节点添加事件的时候，其响应函数（handler）执行时的 this 都指向 Element 节点自身。jQuery 也保持了和标准一致，但却让人迷惑，按 “this 指向调用时所在函数所绑定的对象” 这个定义，jQuery 事件 handler 里的 this，应该指向 jQuery 对象，而非 DOM 节点。因此你会发现在用 jQuery 时，经常需要把事件 handler 里的 element 在用 $ 包裹下变成 jQuery 对象后再去操作。

$('#nav').on('click', function() {
  var _this = $(this) // this指向#nav节点，而非jQuery对象，所以需要再次转为 jQuery 对象
  _this .attr('data-x', x)
  _this .attr('data-x', x)
})

有人可能有如下的疑问：

<div id="nav" onclick="getId()">ddd</div>
<script>
  function getId() {
    alert(this.id)
  }
</script>

点击 div 后，为什么 id 是 undefined，不说是指向的当前元素 div 吗？

判断 this 指向谁，看执行时而非定义时，只要函数(function)没有绑定在对象上调用，它的 this 就是 window。

这里函数 getId 调用时没有绑定在任何对象上，可以理解成这种结构：

div.onclick = function() {
  getId()
}

getId 所处匿名函数里的 this 是 div，但 getId 自身内的 this 则不是了。

2.6 this 可以被 call/apply 改变

call/apply 是函数调用的另外两种方式，两者的第一个参数都可以改变函数的上下文 this。call/apply 是 JS 里动态语言特性的表征。

动态语言：

程序在运行时可以改变其结构，新的函数可以被引进，已有的函数可以被删除，即程序在运行时可以发生结构上的变化。

通常有以下几点特征表示它为动态语言：

动态的数据类型
动态的函数执行
动态的方法重写

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'

2.7 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()

对象 book 里有一个属性 author，有一个 init 方法，给 document 添加了一个点击事件，如果是传统的函数，我们知道 this 指向应该是 document，但箭头函数会指向当前对象 book。

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

posted on 2017-04-01 17:25 放羊的星星bky 阅读(189) 评论(0) 编辑收藏举报

刷新页面返回顶部

放羊的星星bky

JS-this关键字

导航

公告