理解JavaScript里this关键字

1、全局代码中的this:始终指向window

2、函数代码中的this:

var foo = {x: 10};
var bar = {
    x: 20,
    test: function () {
        alert(this === bar);
        alert(this.x);
    }
};
bar.test(); //bar对象调用test(): true, 20
foo.test = bar.test;
foo.test(); //foo对象调用test(): false, 10

在通常的函数调用中,this是由激活上下文代码的调用者来提供的,即调用函数的父上下文(parent context )。this取决于调用函数的方式

即使是正常的全局函数也会被调用方式的不同形式激活,这些不同的调用方式导致了不同的this值。

function foo() {
    alert(this);
}
foo(); // window
alert(foo === foo.prototype.constructor); // true
// 但是同一个function的不同的调用表达式,this是不同的
foo.prototype.constructor(); // foo.prototype
var foo = {
    bar: function () {
        alert(this);
        alert(this === foo);
    }
};
foo.bar(); //foo、true
var exampleFunc = foo.bar;
alert(exampleFunc === foo.bar); //纯函数比较,是true
// 再一次,同一个function的不同的调用表达式,this是不同的
exampleFunc();//window、false

引用类型

  引用类型的值与函数上下文中的this值如何相关?——从最重要的意义上来说。 这个关联的过程是这篇文章的核心。 一个函数上下文中确定this值的通用规则如下:

  在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用括号()的左边是引用类型的值,this将设为引用类型值的base对象(base object),在其他情况下(与引用类型不同的任何其它属性),这个值为null。不过,实际不存在this的值为null的情况,因为当this的值为null的时候,其值会被隐式转换为全局对象。

var foo = {
    bar: function () {
        alert(this);
    }
};
foo.bar(); //foo
(foo.bar)(); //foo
(foo.bar = foo.bar)(); //window
(false || foo.bar)(); //window
(foo.bar, foo.bar)(); //window

第二个例子:在组运算的返回中,我们得到仍是一个引用类型 foo.bar 。这就是this值为什么再次设为base对象,即foo。与下面这例子区别:

(function () {
    alert(this);
 })();//()左边不是引用类型,所以是window

第三、四、五例经过组运算后,得到的都不是引用类型,所以是window。

3、作为构造器调用的函数中的this:

function A() {
    alert(this); // 新创建的对象new A
    this.x = 10;
}
var a = new A();

  在这个例子中,new运算符调用“A”函数的内部的[[Construct]] 方法,接着,在对象创建后,调用内部的[[Call]] 方法。 所有相同的函数“A”都将this的值设置为新创建的对象。

4、手动设置函数的this值

  在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值。它们是.apply和.call方法。他们用接受的第一个参数作为this值,this 在调用的作用域中使用。这两个方法的区别很小,对于.apply,第二个参数必须是数组(或者是类似数组的对象,如arguments,反过来,.call能接受任何参数。两个方法必须的参数是第一个——this。

var b = 10;
function a(c) {
    alert(this.b);
    alert(c);
}
a(20); //10、20
a.call({b: 20}, 30); //20、30
a.apply({b: 30}, [40]);//30、40
时间: 2024-11-03 05:28:15

理解JavaScript里this关键字的相关文章

深入理解Javascript之this关键字

深入理解Javascript之this关键字 作者: Laruence(   ) 本文地址: http://www.laruence.com/2009/09/08/1076.html 转载请注明出处 Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用. 以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方. 其实, 这都是因为, 我们对它的不了解. 刚好最近再给百度学院做<Javascript高级

理解javascript的new关键字

按照javascript的设计理念,new关键字本就不该出现的.按照经典面向对象的思维,new就是创建一个类的对象. 但是javascript又没有类这一概念,所以显得晦涩难懂.一般来说,我们会这样使用new来创建一个对象. var Mammal = function(name){ this.name = name; } var mammal = new Mammal("monkey"); alert(mammal.name); 那么new到底做了些什么事情呢?道格拉斯在<jav

转载 深入理解JavaScript中的this关键字

转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一般用处 2. this.x 与 apply().call() 3. 无意义(诡异)的this用处 4. 事件监听函数中的this 5. 总结 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程

正确理解JavaScript中的this关键字

JavaScript有this关键字,this跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. this和对象的关系 首先来看下面的代码: var person = { name:'Theo Wong', gender:'male', getName:function(){ console.log(person.name); } }; person.getName(); 定义了一个perso

深刻理解JavaScript基于原型的面向对象

主题一.原型 一.基于原型的语言的特点 1 只有对象,没有类;对象继承对象,而不是类继承类. 2  "原型对象"是基于原型语言的核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己创建时和运行时定义的属性,而且可以享有原型对象的属性. 3 除了语言原生的顶级对象,每一个对象都有自己的原型对象,所有对象构成一个树状的层级系统.root节点的顶层对象是一个语言原生的对象,其他所有对象都直接或间接继承它的属性. 显然,基于原型的语言比基于类的语言简单得多,我

图说js中的this——深入理解javascript中this指针

没搞错吧!js写了那么多年,this还是会搞错!没搞错,javascript就是回搞错! ………… 文章来源自——周陆军的个人网站:http://zhoulujun.cn/zhoulujun/html/webfront/ECMAScript/jsBase/2016_0329_7729.html 在写java的时候,this用错了,idea都会直接报错! 比如…… 但是,js,……idea,爱莫能助了…… 在面向对象编程里有两个重要的概念:一个是类,一个是实例化的对象,类是一个抽象的概念,用个形象

JavaScript中this关键字的使用比较

JavaScript中this关键字的使用比较 this关键字在JavaScript中,用的不能说比较多,而是非常多.那么熟悉this关键字的各种用法则显得非常关键. this有时候就是我们经常说的上下文,这个东西的指代对象.它灵活多变,有时候你看它是对象,有时候是window宿主对象. 1.this指向宿主对象 function myWindow() { this.id = 1; // 等价于window.id = 1 console.log(this); // 这里的this就是window

深入理解 JavaScript(二)

立即调用的函数表达式 前言 大家学 JavaScript 的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为"自执行",但作者后面说了很多,来说服大家称呼为"立即调用的函数表达式". 什么是自执行? 在 J

JavaScript里call,apply,bind方法简介

JavaScript里call,apply,bind方法不太容易理解,其实背后的思想并不算非常复杂,希望本文能帮你更好地了解这3个很像,而且看似很神秘的方法. 非要用一个关键字来点明它们的背后思想的精髓的话,关键字就是:this 因为通常程序员对C++比较熟,先借用C++,简单说一下this. 类的成员函数里,都可以用this来访问当前类的成员,但问题是成员函数的参数并没有this这个参数,比如: Animal a; a.eat(); a.eat("meat"); Animal的对象调