Javascript中关键参数this浅析

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

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

理解this

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

任何对象都可以做为上下文中的this的值

在一些对ECMAScript执行上下文和部分this的描述中,this经常被错误的描述成是变量对象的一个属性。 再重复一次:

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

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

 1 var test = function(){};
 2 
 3 test.prototype = {
 4     foo:"apple",
 5     fun:function(){
 6         this.foo="banana";
 7     }
 8 };
 9 
10 var myTest = new test();
11 myTest.fun();
12 
13 console.log(myTest.hasOwnProperty("foo"));  //输出什么    
14 console.log(myTest.hasOwnProperty("fun"));  //输出什么

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

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

1 console.log(myTest.hasOwnProperty("foo"));
2 console.log(myTest.hasOwnProperty("fun"));
3 
4 true 
5 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变量依旧绑定到该对象,看例子:

var myObject = {
    value: 1,
    getValue: function() {
    	return this.value;
    },
    double: function() {
    		return function (){
    				this.value = this.value * 2;
    		}
    }
};

myObject.double()();  // 希望将 value 乘以 2
myObject.getValue(); // 返回 1

因为 ,我们希望调用 myObject.double()() 时,value 乘以 2,但是由于 myObject.double() 返回的是一个函数,而 myObject.double()() 执行了返回的这个函数,此时,this被绑定到了全局 window 而不是 myObject。

有如下经典解决方案:

var myObject = {
    value: 1,
    getValue: function() {
    	return this.value;
    },
    double: function() {
    		var that = this;
    		return function (){
    				that.value = that.value * 2;
    		}
    }
};

myObject.double()();
myObject.getValue(); //2

即是给该方法定义一个变量并且把它赋值为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了。

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

转载注明出处:http://www.cnblogs.com/coco1s/p/3948151.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开发与安全

C++的引用与const指针的关系以及各种传递方式

首先我们知道 const int *p 与 int const *p 是一样的,即 *p 是常量;而 int * const p 跟上面是不一样的,即 p 是常...

2007
来自专栏青青天空树

C语言中把数字转换为字符串 【转】

在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望。由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者...

2.8K5
来自专栏专注 Java 基础分享

基本数据类型及其包装类(一)

我们都说,Java 是一门面向对象型程序设计语言,但是它设计出来的「基本数据类型」仿佛又打破了这一点,所以,只能说 Java 是非 100% 纯度的面向对象程序...

3805
来自专栏小樱的经验随笔

【正则表达式学习笔记之一】简单认识正则表达式

一、引言   正则表达式是什么东东?   在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句...

2083
来自专栏PHP在线

字符串和编码

字符编码 我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题。 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才...

2897
来自专栏你不就像风一样

一文看透Java8新特性:lambda表达式和Stream API

借用引言中的示例,在调用new Thread的含参构造方法时,我们通过匿名内部类的方式实现了Runnable对象,但其实有用的代码只有System.out.pr...

1101
来自专栏老付的网络博客

如何使用正则表达式

说到正则,可能很多人会很头疼这个东西,除了计算机好像很难快速的读懂这个东西,更不用说如果使用了。下面我们由浅入深来探索下正则表达式:

1292
来自专栏有趣的Python

3-Linux C语言结构体-学习笔记

将#include <stdio.h>中stdio.h展开,将未注释的内容直接写入.i文件。

2371
来自专栏佳爷的后花媛

PHP manual(update)

直接改变数组的值自 PHP 5 起可以通过引用传递来做到。之前的版本需要需要采取变通的方法

1611
来自专栏大数据挖掘DT机器学习

Python NLTK 处理原始文本

关于处理原始文本部分导入语句: >>> from __future__ import division >>> import nltk,re,pprint ...

2794

扫码关注云+社区

领取腾讯云代金券