Javascript中神奇的this


Posted in Javascript onJanuary 20, 2016

Javascript 当中的 this 与其他语言是完全不同的机制,很有可能会让一些编写其他语言的工程师迷惑。

1. 误以为 this 指向函数自身

根据 this 的英语语法,很容易将函数中出现的 this 理解为函数自身。在 javascript 当中函数作为一等公民,确实可以在调用的时候将属性值存储起来。但是如果使用方法不对,就会发生与实际预期不一致的情况。具体情况,请看下面代码

function fn(num){
    this.count++;
  }
  
  fn.count = 0;
  
  for(var i=0;i<3;i++){
    fn(i);
  }
  console.log(fn.count); // 0

如果 fn 函数里面的 this 指向自身函数,那么 count 属性的属性值就应该产生变化,但实际上却是纹丝不动。对于这个问题,有些人会利用作用域来解决,比如这么写

var data = {
    count:0
  };
  
  function fn(num){
    data.count++;
  }
  
  for(var i=0;i<3;i++){
    fn(i);
  }
  
  console.log(data.count);  //3

又或者更直接的这么写

function fn(num){
    fn.count++;
  }
  
  fn.count = 0;
  
  for(var i=0;i<3;i++){
    fn(i);
  }
  
  console.log(fn.count);//3

虽然这两种方式都输出了正确的结果,但是却避开了 this 到底绑定在哪里的问题。如果对一个事物的工作原理不清晰,就往往会产生头痛治头,脚痛治脚的问题,从而导致代码变得的丑陋,而且维护性也会变得很差。

2. this神奇的绑定规则

2.1 默认绑定规则

第一种是最常见的 this 的绑定,看一下下面的代码

function fn(){
    console.log(window === this); //浏览器环境
  }
  fn(); //true

函数fn 是直接在全局作用域下调用的,没有带其他任何修饰,这种情况下,函数调用的时候使用了 this 的默认绑定,指向了全局对象。

这样就清楚了第一个例子中的 this 指向, fn 函数中的 this 指向了全局变量,所以 this.count++ 相当于 window.count++(浏览器环境下),当然不会对 fn 函数的count属性产生影响。

有一点要说明的是,上面种情况只能在非严格模式(strict mode)下才能发生,在严格模式下,会将 this 默认绑定为 undefined。以避免全局变量的污染。

2.2 隐式绑定规则

如果函数在以对象为上下文进行调用,那么 this 的绑定就会产生变化。this 会绑定到调用这个函数的对象,查看下面代码:

var obj = {
    a:1,
    fn:function(){
      console.log(this.a);
    }
  }
  
  obj.fn(); //1

即使函数声明不在对象当中,this 指向仍会产生变化

function fn(){
    console.log(this.a);
  }
  var obj = {
    a:1,
    fn:fn
  }
  obj.fn(); //1

由此可见,this 的绑定,不与函数定义的位置有关,而是与调用者和调用方式有关。

在隐式的绑定规则下,有一些特殊的地方,需要注意。

2.2.1 多层对象调用 this 的指向

function fn(){
    console.log(this.a);
  }
  var obj = {
    a:1,
    obj2:obj2
  }
  var obj2 = {
    a:2,
    obj3:obj3
  }
  var obj3 = {
    a:3,
    fn:fn
  }
  
  obj.obj2.obj3.fn(); //3

在多层对象引用下,this 指向的是调用的函数的那个对象。

2.2.2 隐式赋值可能存在丢失现象

查看下面代码

function fn(){
    console.log(this);
  }
  var  obj = {
    fn:fn
  }
  
  var fun = obj.fn;
  fun(); //window

虽然 fn 引用了 obj.fun ,但是函数的调用方式,仍是不带任何修饰的,所以 this 还是绑定在了 window 上。
还有一种情况,容易让大家忽略,那就是传参的时候,其实会进行隐式赋值。

function fn(){
    console.log(this);
  }
  
  function doFn(fn){
    fn();
  }
  
  var obj = {
    fn:fn
  }
  
  doFn(obj.fn); //window

隐式绑定 this 不是一种很推荐的方式,因为很有可能就发生丢失的情况,如果业务当中对 this 的绑定有要求,建议还是使用显示绑定的方式。

2.3 显式绑定规则

显示绑定就是利用函数原型上的 apply 与 call 方法来对 this 进行绑定。用法就是把想要绑定的对象作为第一个参数传进去。

function fn(){
    console.log(this);
  }
  
  var obj = {};
  
  fn.call(obj); //{}

有些时候会想将函数的 this 绑定在某个对象上,但是不需要立即调用,这样的话,直接利用 call 或者 apply 是无法做的。

function fn(){
    console.log(this);
  }
  
  function bind(fn){
    fn();
  }
  
  var obj = {
    fn:fn
  }
  
  bind.call(obj,fn); //window

上面这个例子,看似好像可以,但实际上是 bind 函数的 this 绑定到了 obj 这个对象,但是 fn 仍然是没有任何修饰的调用,所以 fn 仍然是默认的绑定方式。

function fn(){
    console.log(this);
  }
  
  function bind(fn,obj){
    return function(){
      fn.apply(obj,arguments);
    }
  }
  
  var obj = {
    fn:fn
  }
  
  var fun = bind(fn,obj);
  fun(); //obj

这样调用,就可以将灵活多变的 this ,牢牢的控制住了,因为 fn 的调用方式为 apply 调用。所以,this 就被绑定在传入的 obj 对象上,在 ES5 当中,函数的原型方法上多了一个 bind。效果与上面的函数基本一致,具体用法限于篇幅就不多说了。

2.4 new 绑定

new 是一个被很多人误解的一个关键字,但实际上 javascript 的 new 与传统面向对象的语言完全不同。
个人把 new 理解为一种特殊的函数调用,当使用 new 关键字来调用函数的时候,会执行下面操作,

  • 创建一个全新的对象
  • 将空对象的 __proto__ 指向构造函数的 prototype
  • 将新对象的 this 绑定到调用的函数上
  • 如果函数返回值为基本类型或者为 this又或者不返回任何值,那么将会返回这个创建的新对象,如果返回了一个对象,那么则会返回这个对象,而不会返回创建的新对象。
function fn(a){
    this.a = a;
  }
  fn.prototype.hi = function(){
    console.log('hi')
  }
  
  var obj = new fn(2);
  
  console.log(obj);


  function fn(a){
    this.a = a;
    return {};
  }
  
  var obj = new fn(2);
  
  console.log(obj); //{}

2.5 特殊的传参

null 和 undefined 也是可以作为 this 的绑定对象的,但是实际上应用的是默认的绑定。
但是这种传参的实际效用是什么呢?
常见的用法是将一个数组展开,作为参数传入参数。比如

function fn(a,b){
    console.log('a:',a,'b:',b);
  }
  
  fn.apply(null,[1,2]); // a: 1 b: 2

但是这种用法会有一个坑,那就是如果函数存在了 this ,那么就会应用默认的绑定规则,将 this 绑定在全局对象上,发生于预期不一致的情况。为了代码更加稳健,可以使创建一个比空对象更空的对象。

var obj = Object.create(null);
console.log(obj.__proto__); //undefined

var obj2 = {}
console.log(obj2.__proto__); //Object {}

Object原型上有一个 create 方法,这个方法会创建一个对象,然后将对象的原型指向传入的参数,所以传入 null 的话,产生一个没有 prototype 的对象,所以会比空对象更加"空"。

所以传入这个对象,会比传入 null 更加安全。

var obj = Object.create(null);

fn.apply(obj,[1,2]);

2.6 根据作用域来决定 this 的绑定

在 ES6 当中,出现了一个新的函数类型,箭头函数。

如果使用箭头函数,那么就不会使用上面提到的四种 this 绑定方式,而是根据作用域来决定

比较常见的是用于事件函数和定时器的情况。

下面是比较常见的传统 this 写法

function fn(){
    var _this = this;
    setTimeout(function(){
      console.log(_this.a);
    },100)
  }

  var obj = {
    a:2
  }
  
  fn.call(obj); //2

如果使用箭头函数则可以这么写

function fn(){
    setTimeout(()=>{
      //this 来源于 fn 函数的作用域
      console.log(this.a);
    },100)
  }

  var obj = {
    a:2
  }
  
  fn.call(obj); //2

2.7 事件函数当中 this 的绑定机制

如果是在事件函数当中,this 的绑定是指向触发事件的 DOM 元素的,

$('body')[0].addEventListener('click',function(){
  console.log(this);
},false);

点击 body 元素之后,控制台则会显示 body 元素

3. 小结

如果想判断一个函数的 this 绑定在哪里,首先是找到函数的调用位置,之后是按照规则来判断。

  • 如果函数调用时没有任何修饰条件,那么在严格模式下则会绑定到 undefined ,非严格模式下会绑定到全局。
  • 如果是用对象做上下文,来对函数进行调用,那么则会绑定到调用的这个对象上。
  • 如果是用 call 或者 apply 方法来进行调用的,则会绑定到第一个传入参数上。
  • 如果是使用 new 关键字来调用函数的,则会绑定到新创建的那个对象上.
  • 如果是在事件函数内,则会绑定到触发事件的那个DOM元素上。

以上就是关于Javascript中神奇的this的相关介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
javascript中如何判断类型汇总
May 14 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
javascript实现图片轮播效果
Jan 20 #Javascript
JS获取鼠标坐标位置实例分析
Jan 20 #Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 #Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 #Javascript
高性能JavaScript循环语句和条件语句
Jan 20 #Javascript
详解Javascript模板引擎mustache.js
Jan 20 #Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 #Javascript
You might like
PHP中一个控制字符串输出的函数
2006/10/09 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python多进程间通信代码实例
2019/09/30 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
大学生创业计划书怎么写
2014/09/15 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
Go Plugins插件的实现方式
2021/08/07 Golang