JS中的this指向相关

原创 2017年01月03日 17:28:00

关于JS中this的问题

JS中的函数调用有4种方式:

1、作为普通函数调用

2、作为对象方法调用

3、作为构造函数调用

4、使用call或者apply

全局执行:

首先,我们尝试全局执行下console.log(this);

浏览器会输出window对象

注意,如果在严格模式下执行'use strict',则输出的会是undefined


第一种情况:作为普通函数调用

function a(){
	this.name = '张三';
	console.log(this.name);
	console.log(this);
}
a();
console.log(name);
//张三
//window
//张三
//这里的this指向的是全局window对象,name为定义的全局变量

//换一种写法
var name = '张三';
function a(){
	var name = '李四';
	console.log(this.name);
}
a();
//张三
//同样,这里的this.name指向的也是全局对象name

//再换一种写法
var name = '张三';
function a(){
	this.name = '李四';
}
a();
console.log(name);
//李四

第二种情况:作为对象方法调用

var name = '张三';
var person = {
	name : '李四',
	showName : function(){
		console.log(this.name);
	}
}
person.showName();
//李四
//这里this指向的是person

//再执行两句话
var other = person.showName;
other();
//张三
//这里other属于全局对象,等同于window.other,this是在执行时绑定它的作用域,所以这里的this表示window对象

//注意setTimeout的一些坑
var person = {
	fun1 : function(){
		console.log(this);
	},
	fun2 : function(){
		setTimeout(this.fun1, 1000);
	}
}
person.fun2();
//在这种情况下,会输出window对象
//可以理解为setTimeout本身也是一个函数,等同于window.setTimeout,因此,这里的this是在执行的时候绑定它的作用域,则为window
//解决办法
var person = {
	fun1 : function(){
		console.log(this);
	},
	fun2 : function(){
		var _this = this;
		setTimeout(function(){
			console.log(this);
			console.log(_this);
		}, 1000);
	}
}
//window
//person
person.fun2();
//通过定义一个_this来存储this的指向

第三种情况:作为构造函数调用

function Person(){
	this.name = '张三';
}
var a = new Person();
console.log(a.name);
//张三
//使用new关键字生成的对象,会将构造函数中的this作用域绑定在该对象上面

第四种情况:使用call或者apply

var a = {
	name : '张三'
}
function foo(){
	console.log(this);
}
foo.call(a);
//Object{name : '张三'}
//在执行foo.call(a)的时候,函数内部的this指向了a这个对象

彻底弄懂js中的this指向

js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看: 全局环境中this指向window。 有以下几种...
  • qq_33988065
  • qq_33988065
  • 2017年04月03日 11:19
  • 5478

如何理解JS中的this指向问题

如何理解JS中的this指向问题this中的最终指向的是那个调用它的函数(一定要记住这句话,但是这句话仍然有问题,下文会做解释) this在函数式编程和面向对象编程的过程中,能帮助简化我们的代码,...
  • sinat_36422236
  • sinat_36422236
  • 2016年10月22日 13:52
  • 850

js中this指向学习总结

js中this指向学习总结
  • liujie19901217
  • liujie19901217
  • 2016年05月02日 20:54
  • 1656

JavaScript的回调函数内部this的指向问题以及四种绑定this指向的方法

1、常见回调函数内部的this指向问题 我们先看下面这段代码:var o = { age : 12, say : function() { function call...
  • Mr_28
  • Mr_28
  • 2017年10月25日 17:50
  • 470

js中this指向问题实例详解

JS中, this的值到底是什么? 几个月之前, 拜读了《javascript语言精髓》, 里面对于这个问题, 做出了很好的解释…JS中, this的值取决于调用的模式, 而JS中共有4中调用模式: ...
  • babybk
  • babybk
  • 2016年04月28日 11:08
  • 1936

js this的指向详解

js 的this指向主要有四种: 1.作为对象的方法调用,这个时候this指向的事该对象 例如: var obj={ a:1, getA:function(){ alert(this===o...
  • maoguiyou
  • maoguiyou
  • 2016年05月21日 14:42
  • 3516

js闭包中this的指向问题及三种解决方法

下面是一个问题,对象方法中定义的子函数,子函数执行时this指向哪里? 三个问题:     (1)以下代码中打印的this是个什么对象?     (2)这段代码能否实现使myNumber.val...
  • qq_21794603
  • qq_21794603
  • 2017年05月11日 22:37
  • 983

Js核心面向对象面试题

1.网页三要素是什么 Icon HTML(内容) CSS(外观) Javascript(行为) 2.JavaScript是什么 Icon JavaScript一门解释型(不是编译...
  • t0404
  • t0404
  • 2016年07月12日 22:43
  • 9149

在原型链之中的查询及this指向问题

/** * Created by zhang on 2017/5/9. */var Sup = function(){ this.name = "sup"; this.getNam...
  • u012182627
  • u012182627
  • 2017年05月09日 21:44
  • 202

js中this指向的四大规则和示例

当一个函数被调用的时候,会创建一个活动记录(这个也是前面提到的执行上下文),这个记录会包含函数在哪里被调用,函数的调用方式,传入参数等各种信息,this就是这个记录的一个属性。 this指向的的四大...
  • sjn0503
  • sjn0503
  • 2016年08月20日 13:15
  • 345
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS中的this指向相关
举报原因:
原因补充:

(最多只允许输入30个字)