深入理解Javascript中的this关键字


Posted in Python onMarch 27, 2015

自从接触javascript以来,对this参数的理解一直是模棱两可。虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪。

但对于this参数,确实会让人产生很多误解。那么this参数到底是何方神圣?

理解this

this是一个与执行上下文(execution context,也就是作用域)相关的特殊对象。因此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下 文中被触发的对象)。

任何对象都可以做为上下文中的this的值。在一些对ECMAScript执行上下文和部分this的描述中的 所产生误解。this经常被错误的描述成是变量对象的一个属性。 再重复一次:

this是执行上下文的一个属性,而不是变量对象的一个属性。 这个特性非常重要,因为与变量相反,this从不会参与到标识符解析过程。换句话说,在代码中当访问this的时候,它的值是直接从执行上下文中获取的,并不需要任何作用域链查找。this的值只在进入上下文的时候进行一次确定。

废话不多,先看一个板栗:

var test = function(){};
test.prototype = {

    foo:"apple",

    fun:function(){

        this.foo="banana";

    }

};
var myTest = new test();

myTest.fun();
console.log(myTest.hasOwnProperty("foo"));  //输出什么    

console.log(myTest.hasOwnProperty("fun"));  //输出什么

hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。

不知道看官们心里的答案是什么,正确的答案是true,false。

console.log(myTest.hasOwnProperty("foo"));

console.log(myTest.hasOwnProperty("fun"));
true 

false

要弄明白为什么是这样,就必须要理解上面this所扮演的角色,所指代的对象。在《javascript语言精粹》一书中,指出了在javascript中一共有四种调用模式:

1.方法调用模式
2.函数调用模式
3.构造器调用模式
4.apply调用模式

而在这些模式当中,对于如何初始化关键参数this上是存在不同差异的。

方法调用模式

当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,this被绑定到该对象。注意加粗的这句是重点:

// 创建myObject。它有一个value属性和一个increment方法
var myObject = {

    value: 0;

    increment: function(inc) {

        this.value += typeof inc ==='number'?inc:1; // 接受一个可选参数,如果不是数字,则默认为数字1

    }

};
myObject.increment();

console.log(myObject.value);    // 1
myObject.increment(2);          //传入数字2

console.log(myObject.value);    // 3

这里,方法increment可以使用this去访问myObject对象,所以可以改变value的值。而且,this到对象的绑定发生在调用的时候。

函数调用模式

如果一个函数并非一个对象的属性时,那么它被当作一个函数来调用,此时,this被绑定到全局对象,书上说这是js语言设计的一个缺陷。倘若设计正确,当内部函数被调用的时,this应该仍然绑定到外部函数的this变量。抛开对语言设计的正确与否讨论,要当函数调用模式时this变量依旧绑定到该对象,有如下经典解决方案:

// 给myObject增加一个double方法
var myObject = {

    value: 0;

    increment: function(inc) {

        this.value += typeof inc ==='number'?inc:1; // 接受一个可选参数,如果不是数字,则默认为数字1

    }

};
myObject.increment(2);
myObject.double = function () {

    var that=this;  //解决方法

    

    var helper= function () {

        that.value=add(that.value,that.value);

    };

    helper();

};

myObject.double();  //以方法的形式调用double

console.log(myObject.getValue());   //6

即是给该方法定义一个变量并且把它赋值为this,那么内部函数就可以通过那个变量访问到this,按照约定,给那个变量命名为that。

构造器调用模式

构造器调用模式即是我一开头给出的例子所提到的。如果在一个函数前面带上new来调用,那么将创建一个连接到该函数的prototype成员新对象,同时this将会被绑定到那个新对象上。听上去十分拗口且难以理解,先再看个demo:

//构造一个名为Quo的构造器函数,带有一个status属性的对象
var Quo = function(string){

    this.status =string;

};
Quo.prototype.get_status = function(){

    return this.status;

}
var myQuo =new Quo("confuse");  //构造一个Quo实例
console.log(myQuo.get_status());  //confuse

简单来说,Quo对象下的this在被用为构造一个新实例即new时,this指代的是新生成的myQuo对象而不是Quo对象本身。

一句话,重点就是:原型中的this不是指的原型对象,而是调用对象。

再回过头看一开始的demo,就很好理解了,在执行myTest.fun()时,this指代了myTest对象,所以生成了一个foo属性值为“banana”,所以myTest.hasOwnProperty("foo")返回值为true。

Apply调用模式

因为javascript是一门函数式面向对象编程语言,所以函数可以拥有方法。apply方法让我们构建一个参数数组并用其去调用其他函数,apply方法接收两个参数,第一个是将被绑定的this的值,第二个是参数数组。说简单直接一点就是apply方法能劫持另外一个对象的方法,继承另外一个对象的属性. 推荐可以看js中apply方法的使用详细解析 ,就不摆demo了。

学识尚浅,若文中有不正确,请务必指出,误人子弟实乃大过。

Python 相关文章推荐
python 正则式使用心得
May 07 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
Jul 16 Python
Python中的作用域规则详解
Jan 30 Python
python实现文件快照加密保护的方法
Jun 30 Python
Python正则表达式分组概念与用法详解
Jun 24 Python
彻底理解Python list切片原理
Oct 27 Python
解决seaborn在pycharm中绘图不出图的问题
May 24 Python
python K近邻算法的kd树实现
Sep 06 Python
Python3内置模块random随机方法小结
Jul 13 Python
python-视频分帧&多帧合成视频实例
Dec 10 Python
Python图像处理库PIL的ImageDraw模块介绍详解
Feb 26 Python
python 瀑布线指标编写实例
Jun 03 Python
Python运用于数据分析的简单教程
Mar 27 #Python
Python中下划线的使用方法
Mar 27 #Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
Mar 27 #Python
python根据出生年份简单计算生肖的方法
Mar 27 #Python
python实现根据月份和日期得到星座的方法
Mar 27 #Python
python根据给定文件返回文件名和扩展名的方法
Mar 27 #Python
python中使用mysql数据库详细介绍
Mar 27 #Python
You might like
一步一步学习PHP(3) php 函数
2010/02/15 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
php include和require的区别深入解析
2013/06/17 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
React简单介绍
2017/05/24 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python运行异常管理解决方案
2020/03/09 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
详解Python中的路径问题
2020/09/02 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
年终考核评语
2014/01/19 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
超市开店计划书
2014/04/26 职场文书
初中作文评语集锦
2014/12/25 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
远程教育学习心得体会
2016/01/23 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers