javascript this

  在上篇执行上下文中,在建立阶段中,工作之一就是this值的赋值,那什么是this呢?一起学习下。

  主要看了王福朋的一篇文章:http://www.cnblogs.com/wangfupeng1988/p/3988422.html

  先看一个例子:

	var name = "dog";
	var nameObj ={
	    name : "cat",
	    showName : function(){
	        alert("this:"+this+";this.name:"+this.name);
	    },
	    waitShowName : function(){
	        setTimeout(this.showName, 1000);
	    }
	};  

	nameObj.waitShowName();

  结果是:

  由图可知,this是window,而this.name自然就是"dog",可this.name为什么不是"cat"呢?

  根据王福朋的文章,再测试一下几种情况:

  情况1:构造函数

	function add(){
		this.name = "niulina";
		this.age = 24;

		console.log(this);
	}
	var a = new add();

  结果:

  所谓构造函数就是用来new对象的函数。而构造函数中的this指代的是拥有属性name,age的对象a。

  

  若不new一个对象出来,那this指代的是:

	function add(){
		this.name = "niulina";
		this.age = 24;

		console.log(this);
	}
	add();

  结果:

  那在这种情况下,this指代的是window。

  情况2:函数作为对象的一个属性

	var obj = {
		x:10,
		fn:function(){
			console.log(this);
			console.log(this.x);
		}
	};
	obj.fn();

   结果:

  

  由结果可知:函数fn被作为obj对象的属性,此时的this指代的是obj对象。

  如果把fn单提出来后调用会怎样?

	var obj = {
		x:10,
		fn:function(){
			console.log(this);
			console.log(this.x);
		}
	};
	var fn1 = obj.fn;
	fn1();

  结果:

  如果被fn函数被赋给fn1,然后在全局环境中调用,this指的就是window。

  情况3:函数用call或者apply调用

	var obj = {
		x:10,
	};
	var fn = function(){
		console.log(this);
		console.log(this.x);
	}
	fn.call(obj);

  结果:

  调用call后,this指代的是对象obj,这是因为在call函数中,改变的this的指向。apply函数同理。

  情况4:全局 & 调用普通函数  

	var x = 10;
	var fn = function(){
		console.log(this);
		console.log(this.x);
	}
	fn();

  结果:

  由结果可知,在全局环境下,this指代的是window。

  有一个情况比较特殊:

	var obj = {
		x:10,
		fn:function(){
			function f(){
				console.log(this);
				console.log(this.x);
			}
			fn();
		}
	};
	obj.fn();

  结果:

  f函数在fn函数中定义幷被调用,但其this指代的还是Window。

  所以说:

  一般而言,在Javascript中,this指向函数执行时的当前对象。this关键字在Javascript中和执行环境,而非声明环境有关。

时间: 2024-10-08 10:16:53

javascript this的相关文章

Javascript中call的使用

call 方法应用于:Function 对象调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,   [,.argN]]]]])参数:thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明:call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 G

你不知道的javascript 之 >>

?远大于符号 在数学公式中,">>"代表远大于符号,表示一个数远大于另一个数,如76>>3,-2>>-99等.庞加莱与波莱尔1901年首先使用了它,很快被数学界所接受,沿用至今. 折叠编辑本段右移运算符 在许多计算机编程语言(例如:C语言.C++语言.Java语言.JavaScript语言.Pascal语言等)中,">>"代表右移运算符,就相当于"shr".该运算符为双目运算符,结合方向为从左到右,

初识JavaScript

JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.因为JavaScript兼容于ECMA标准,因此也称为ECMAScript. ECMAScript,描述了该语javascript组成言的语法和基本对象. 文档对象模型(DOM),描述处理网页内容的方法

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

JavaScript数据类型检测

一.JavaScript 数据类型 1.基本数据类型(6种) Undefined Null Boolean Number String Symbol (ES6新增) 2.引用数据类型: Object 二.数据类型检测 1. typeof 可以检测除null 外的基本类型.null 和所有对象的typeof都是"object", 不能用于检测用户自定义类型. 比如Date, RegExp, Array, DOM Element的类型都是"object". var s

JavaScript的进阶之路(二)函数简介,变量、作用域和内存问题

<h3>ECMAScript中函数不存在函数签名的概念,没有重载</h3><h3>无需指定返回值,可以在任何时候返回任何值.未指定返回值的函数,返回的是一个特殊的undefined值</h3> <script type="text/javascript"> function sayHi(){ console.log("Hi"); }; sayHi(); function sayName(name,age){

JavaScript 二进制的 AST

本文和大家分享的主要是javascript中二进制的 AST相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 背景介绍 多年来,JavaScript 已经从最慢的脚本语言之一,从老爷车发展为兰博基尼,不管是通过 Web 浏览器还是其他环境.它都能够快到可以运行桌面.服务器.移动甚至嵌入式应用程序. 随着 JavaScript 的增长,应用程序的复杂程度和规模都越来越复杂.然而,二十年前,少数使用过 JavaScript 的网站也就加载几千字节的 JavaScript,许多网站

JavaScript 对象

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 建 JavaScript 对象 通过 JavaScript,您能够定义并创建自己的对象. 创建新对象有两种不同的方法: 定义并创建对象的实例 使用函数来定义对象,然后创建新的对象实例

实现一个函数clone,使JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制. 1 /** 对象克隆 2 * 支持基本数据类型及对象 3 * 递归方法 */ 4 function clone(obj) { 5 var o; 6 switch (typeof obj) { 7 case "undefined": 8 break; 9 case "string": o = obj + &q

javascript的优美与鸡肋

--总结来自:<javascript语言精粹> 任何语言都有其优美的地方和其鸡肋的地方.避归一些语言的糟粕,能相应的降低bug出现的几率. 优美处: 函数是头等对象 基于原型继承的动态对象 对象字面量和数组字面量 糟粕: 1. 全局变量 全局变量有三种表达方式: var声明:var foo = value; 添加属性到全局对象上,即添加到window上:window.foo = value; 未经声明的变量:foo = value; 虽然变量可以未经声明就使用,但是这会导致后期的很多的bug出