JavaScript中的this关键字使用方法总结

 这篇文章主要介绍了JavaScript中的this关键字使用方法总结,本文讲解了作为对象方法调用、作为函数调用、作为构造函数调用、使用 apply 或 call 调用等内容,需要的朋友可以参考下

 
 

在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。
它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。

1.作为对象方法调用

在 JavaScript 中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法,在使用这种调用方式时,this 被自然绑定到该对象。

 

代码如下:

var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1)//this 绑定到当前对象,即 point 对象

 

2.作为函数调用

函数也可以直接被调用,此时 this 绑定到全局对象。在浏览器中,window 就是该全局对象。比如下面的例子:函数被调用时,this 被绑定到全局对象,接下来执行赋值语句,相当于隐式的声明了一个全局变量,这显然不是调用者希望的。

 

代码如下:

function makeNoSense(x) {
this.x = x;
}
makeNoSense(5);
x;// x 已经成为一个值为 5 的全局变量

 

对于内部函数,即声明在另外一个函数体内的函数,这种绑定到全局对象的方式会产生另外一个问题。我们仍然以前面提到的 point 对象为例,这次我们希望在 moveTo 方法内定义两个函数,分别将 x,y 坐标进行平移。结果可能出乎大家意料,不仅 point 对象没有移动,反而多出两个全局变量 x,y。

 

代码如下:

var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
// 内部函数
var moveX = function(x) {
this.x = x;//this 绑定到了哪里?
};
// 内部函数
var moveY = function(y) {
this.y = y;//this 绑定到了哪里?
};

 

moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1

 

这属于 JavaScript 的设计缺陷,正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,聪明的 JavaScript 程序员想出了变量替代的方法,约定俗成,该变量一般被命名为 that。

代码如下:

var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
// 内部函数
var moveX = function(x) {
that.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1

 

作为构造函数调用

JavaScript 支持面向对象式编程,与主流的面向对象式编程语言不同,JavaScript 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式。相应的,JavaScript 中的构造函数也很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。

代码如下:

function Point(x, y){
this.x = x;
this.y = y;
}

 

使用 apply 或 call 调用

让我们再一次重申,在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。让我们看一个具体的例子:

代码如下:

function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
}

 

var p1 = new Point(0, 0);
var p2 = {x: 0, y: 0};
p1.moveTo(1, 1);
p1.moveTo.apply(p2, [10, 10]);

 

在上面的例子中,我们使用构造函数生成了一个对象 p1,该对象同时具有 moveTo 方法;使用对象字面量创建了另一个对象 p2,我们看到使用 apply 可以将 p1 的方法应用到 p2 上,这时候 this 也被绑定到对象 p2 上。另一个方法 call 也具备同样功能,不同的是最后的参数不是作为一个数组统一传入,而是分开传入的。

代码如下:

function Foo(){
//1.this引用的构造函数是argument.callee引用的对象
//说明是通过new操作符执行的构造函数
if(this.constructor==arguments.callee){
alert('Object Created');
}
//2.this是window, 那么是全局调用
if(this==window){
alert('normal call');
}
else{//3.否则是作为其他对象的方法来调用
alert('called by '+ this.constructor);
}
}
Foo();//全局函数调用
Foo.call(new Object());//作为一个object对象的成员方法来调用
new Foo();//被new操作符调用,执行对象构造

时间: 2024-08-12 12:59:24

JavaScript中的this关键字使用方法总结的相关文章

JavaScript中的this关键字使用方法总结_javascript技巧

在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代. 它可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式.JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用. 1.作为对象方法调用 在 JavaScript 中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法,在使用这种调用方式时,this 被

深入理解Javascript中的this关键字

 这篇文章主要介绍了深入理解Javascript中的this关键字,本文讲解了方法调用模式.函数调用模式.构造器调用模式.apply调用模式中this的不同之处,需要的朋友可以参考下     自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底是何方神圣? 理解this this是一个与执行上下文(execution context,也就是作用域)相

老生常谈JavaScript中的this关键字_javascript技巧

相对于很多其他的面向对象语言来说,this代表的就是当前对象.例如Java中的this就是编译期间确定的.而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的 Java中的this 在以下代码中.this代表的就是p对象. public class Test { public static void main(String[] args) { Person p = new Person("zmt",30); System.out.println(p.name); }

图解JavaScript中的this关键字_javascript技巧

JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(

注意JavaScript中RegExp对象的test方法

javascript|对象 javascript 中的 RegExp 对象用于正则表达式相关的操作,这个对象提供了一个方法 test 来判定某个字符串是否满足某个 pattern. 返回值是 true/false.今天我碰到了一个问题: <script type="text/javascript"><!--var re = /^\d+(?:\.\d)?$/ig;    alert(re.test('112.3'));alert(re.test('33'));//--&

在JavaScript中处理字符串之fontcolor()方法的使用

  这篇文章主要介绍了在JavaScript中处理字符串之fontcolor()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法会导致就好像它是在一个字符串被显示在指定的颜色 标记. 语法 ? 1 string.fontcolor( color ) 下面是参数的详细信息: color: 字符串表示的颜色为十六进制RGB三元或作为一个字符串 返回值: 字符串表示的颜色为十六进制RGB三元或作为一个字符串 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1

在JavaScript中处理字符串之link()方法的使用

  这篇文章主要介绍了在JavaScript中处理字符串之link()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法创建了请求另一个URL的HTML超文本链接. 语法 ? 1 string.link( hrefname ) 下面是参数的详细信息: hrefname: 任何字符串指定HREF标记; 它应该是一个有效的URL 返回值: 返回字符串标签 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <head> &

JavaScript中操作字符串之localeCompare()方法的使用

  这篇文章主要介绍了JavaScript中操作字符串之localeCompare()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 这个方法返回一个数字表示参考字符串是否到来之前或之后或相同的排序顺序给定的字符串. 语法 ? 1 string.localeCompare( param ) 下面是参数的详细信息: param : 字符串对象进行比较的字符串 返回值: 0 : 字符串匹配100% 1 : 不匹配,参数值来自于语言环境的排序顺序字符串对象的值之前 -1 : 不匹配,参数

JavaScript中length属性的使用方法

  这篇文章主要介绍了JavaScript中length属性的使用方法,是JS入门学习中的基础知识,需要的朋友可以参考下 此属性返回字符串中的字符数. 语法 ? 1 string.length 下面是参数的详细信息: A string 返回值: 返回字符串中的字符数. 例子: ? 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title>JavaScript String length Property</title> <