谈谈Javascript的this指针

简介:
  • JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。
  • JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。
  • 其实如果完全掌握了this的工作原理,自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么:

1.全局代码中的this

  1. alert(this)//window 

全局范围内的this将会指向全局对象,在浏览器中即使window。

2.作为单纯的函数调用

function fooCoder(x) {  
    this.x = x;  
}  
fooCoder(2);  
alert(x);// 全局变量x值为2 

这里this指向了全局对象,即window。在严格模式中,则是undefined。

3.作为对象的方法调用

复制代码
var name = "clever coder";  
var person = {  
    name : "foocoder",  
    hello : function(sth){  
        console.log(this.name + " says " + sth);  
    }  
}  
person.hello("hello world"); 
复制代码

输出 foocoder says hello world。this指向person对象,即当前对象。

4.作为构造函数

  1. new FooCoder();  

函数内部的this指向新创建的对象。

5.内部函数

复制代码
var name = "clever coder";  
var person = {  
    name : "foocoder",  
    hello : function(sth){  
        var sayhello = function(sth) {  
            console.log(this.name + " says " + sth);  
        };  
        sayhello(sth);  
    }  
}  
person.hello("hello world");//clever coder says hello world  
复制代码

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self:

  1. 复制代码
    var name = "clever coder";  
    var person = {  
        name : "foocoder",  
        hello : function(sth){  
            var that = this;  
            var sayhello = function(sth) {  
                console.log(that.name + " says " + sth);  
            };  
            sayhello(sth);  
        }  
    }  
    person.hello("hello world");//foocoder says hello world 
    复制代码

6.使用call和apply设置this

  1. person.hello.call(person, "world")

apply和call类似,只是后面的参数是通过一个数组传入,而不是分开传入。两者的方法定义:

  1. call( thisArg [,arg1,arg2,… ] );  // 参数列表,arg1,arg2,...  
    apply(thisArg [,argArray] );     // 参数数组,argArray 

两者都是将某个函数绑定到某个具体对象上使用,自然此时的this会被显式的设置为第一个参数。

简单地总结

简单地总结以上几点,可以发现,其实只有第六点是让人疑惑的。

其实就可以总结为以下几点:

1.当函数作为对象的方法调用时,this指向该对象。

2.当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)

3.构造函数中的this指向新创建的对象

4.嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

再总结的简单点,如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。

  1. obj.foocoder();  
  2. foocoder.call(obj, ...);  
  3. foocoder.apply(obj, …);  

更进一步

我们可能经常会写这样的代码:

  1. $("#some-ele").click = obj.handler;  

如果在handler中用了this,this会绑定在obj上么?显然不是,赋值以后,函数是在回调中执行的,this会绑定到$(“#some-div”)元素上。这就需要理解函数的执行环境。本文不打算长篇赘述函数的执行环境,可以参考《javascript高级程序设计》中对执行环境和作用域链的相关介绍。这里要指出的时,理解js函数的执行环境,会更好地理解this。

那我们如何能解决回调函数绑定的问题?ES5中引入了一个新的方法,bind():

复制代码
fun.bind(thisArg[, arg1[, arg2[, ...]]])  
 
thisArg  
当绑定函数被调用时,该参数会作为原函数运行时的this指向.当使用new 操作符调用绑定函数时,该参数无效.  
arg1, arg2, ...  
当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数. 
复制代码
  • 该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

显然bind方法可以很好地解决上述问题。

  1. $("#some-ele").click(person.hello.bind(person));  
    //相应元素被点击时,输出foocoder says hello world  

其实该方法也很容易模拟,我们看下Prototype.js中bind方法的源码:

  1. 复制代码
    Function.prototype.bind = function(){  
      var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();  
      return function(){  
        return fn.apply(object,  
          args.concat(Array.prototype.slice.call(arguments)));  
      };  
    };  
    复制代码
本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/archive/2011/09/02/2164009.html,如需转载请自行联系原作者
相关文章
|
9月前
|
Java C++
This指针
This指针
60 0
|
8月前
|
数据采集 存储 编译器
this指针如何使C++成员指针可调用
本文介绍了C++中的this指针,它是一个隐藏的指针,用于在成员函数中访问对象实例的成员。文章通过代码示例阐述了this指针的工作原理,以及如何使用指向成员变量和成员函数的指针。此外,还提供了一个多线程爬虫示例,展示this指针如何使成员指针在对象实例上调用,同时利用代理IP和多线程提升爬取效率。
this指针如何使C++成员指针可调用
|
8月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
70 3
|
7月前
|
JavaScript
JS 【详解】双指针排序 -- 数组合并后递增排序
JS 【详解】双指针排序 -- 数组合并后递增排序
50 0
|
7月前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
57 0
|
7月前
|
JavaScript 前端开发
|
9月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
8月前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
8月前
|
编译器 C++
this指针的特性
this指针的特性
49 0
|
8月前
类与对象\this指针
类与对象\this指针
54 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    40
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    32
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    54
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55