雅星娱乐注册:JavaScript中this详解

时间: 作者:土加

  

[JavaScript,this]JavaScript中this详解

  

都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言。它把函数式编程和面向对象编程糅合一起,再加上动态语言特性,简直强大无比(其实是不能和C++比的,^_^ )。

  

  

这里的主题是 this ,不扯远了。this 本身原本很简单,总是指向类的当前实例,this 不能赋值。这前提是说 this 不能脱离 类/对象 来说,也就是说 this 是面向对象语言里常见的一个关键字。说的极端点,如果你编写的 JS 采用函数式写法,而不是面向对象式,你所有的代码里 this 会少很多,甚至没有。记住这一点,当你使用 this 时,你应该是在使用对象/类 方式开发,否则 this 只是函数调用时的副作用。

  

  

JS 里的 this  

  

在 function 内部被创建  
  指向调用时所在函数所绑定的对象(拗口)  
  this 不能被赋值,但可以被 call/apply 改变  

  

以前用 this 时经常担心,不踏实,你不知道它到底指向谁? 这里把它所有用到的地方列出  

  

this 和构造器  
  this 和对象  
  this 和函数  
  全局环境的 this  
  this 和 DOM/事件  
  this 可以被 call/apply 改变  
  ES5 中新增的 bind 和 this  
  ES6 箭头函数(arrow function) 和 this  

  

1. this 和构造器  

  

this 本身就是类定义时构造器里需要用到的,和构造器在一起再自然不过。

  

  
  
  /**  * 页签  *  * @class Tab  * @param nav {string} 页签标题的class  * @param content {string} 页面内容的class  *  */  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() {  };  
  
  

按照 JavaScript 的习惯, this 应该挂属性/字段,方法都应该放在原型上。

  

  

2. this 和对象  

  

JS 中的对象不用类也可以创建,有人可能奇怪,类是对象的模板,对象都是从模板里 copy 出来的,没有类怎么创建对象? JS 的确可以,并且你完全可以写上万行功能代码而不用写一个类。话说 OOP 里说的是面向对象编程,也没说面向类编程,是吧 ^_^ 。

  

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

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),只是间接使用罢了。

  

  

4. 全局环境的 this  

  

前面提到 this 是 “指向调用时所在函数所绑定的对象”, 这句话拗口但绝对正确,没有一个多余的字。全局环境中有不同的宿主对象,浏览器环境中是 window, node 环境中是 global。这里重点说下浏览器环境中的 this。

  

  

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

  

alert(window=== this) // true  
  因此你会看很很多开源 JS lib 这么写  

  

(function() {  
  // ...

  
  
  })(this);  
  或这样写  

  

(function() {  
  // ...

  
  
  }).call(this);  
  比如 underscore 和 requirejs,大意是把全局变量 window 传入匿名函数内缓存起来,避免直接访问。至于为啥要缓存,这跟 JS 作用域链有关系,读取越外层的标识符性能会越差。请自行查阅相关知识,再说就扯远了。 (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台