灵活的理解JavaScript中的this指向

this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要。首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。

  为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章,当然如果你有兴趣也可以看看,毕竟这是js中必须要掌握的东西。

例子1:

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this); //Window
}
a(); 

按照我们上面说的this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的,下面的代码就可以证明。

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);  //Window
}
window.a(); 

和上面代码一样吧,其实alert也是window的一个属性,也是window点出来的。

例子2:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn(); 

  这里的this指向的是对象o,因为你调用这个fn是通过o.fn()执行的,那自然指向就是对象o,这里再次强调一点,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁,一定要搞清楚这个。

其实例子1和例子2说的并不够准确,下面这个例子就可以推翻上面的理论。

如果要彻底的搞懂this必须看接下来的几个例子

例子3:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn(); 

  这段代码和上面的那段代码几乎是一样的,但是这里的this为什么不是指向window,如果按照上面的理论,最终this指向的是调用它的对象,这里先说个而外话,window是js中的全局对象,我们创建的变量实际上是给window添加属性,所以这里可以用window点o对象。

  这里先不解释为什么上面的那段代码this为什么没有指向window,我们再来看一段代码。

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn(); 

  这里同样也是对象o点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的那些不就都是错误的吗?其实也不是,只是一开始说的不准确,接下来我将补充一句话,我相信你就可以彻底的理解this的指向的问题。

 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

  情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

  情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,例子3可以证明,如果不相信,那么接下来我们继续看几个例子。

var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();

尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。

还有一种比较特殊的情况,例子4:

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j(); 

这里this指向的是window,是不是有些蒙了?其实是因为你没有理解一句话,这句话同样至关重要。

  this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window,这和例子3是不一样的,例子3是直接执行了fn。

  this讲来讲去其实就是那么一回事,只不过在不同的情况下指向的会有些不同,上面的总结每个地方都有些小错误,也不能说是错误,而是在不同环境下情况就会有不同,所以我也没有办法一次解释清楚,只能你慢慢地的去体会。

构造函数版this:

function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子 

  这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向,将这个this指向对象a,为什么我说a是对象,因为用了new关键字就是创建一个对象实例,理解这句话可以想想我们的例子3,我们这里用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象,那么为什么对象Fn中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份。

  除了上面的这些以外,我们还可以自行改变this的指向,关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章,详细的说明了我们如何手动更改this的指向。

灵活的理解JavaScript中的this指向对我们的工作有很大的帮助,同时感谢大家对我们网站的支持!

时间: 2016-02-22

js严格模式总结(分享)

首页,我们要理解严格模式的概念,严格模式是一种特殊的执行模式,它修复了部分语言上的不足,提供更强的错误检查,病增强安全性.可以对部分函数进行执行严格模式,如: function func(){ 'use strict' } 也可以对整个js文件进行执行严格模式,如: 'use strict' function func(){ } 那么我们在以下情况不能使用: 1.不允许用width 2.不允许未声明的变量被赋值 3.arguments变为参数的静态副本 4.delete参数.函数名报错 5.de

JavaScript严格模式下关于this的几种指向详解

前言 相信不少人在学习或者使用Javascript的时候,都曾经被 JavaScript 中的 this 弄晕了,那么本文就来整理总结一下在严格模式下 this 的几种指向. 一.全局作用域中的this 在严格模式下,在全局作用域中,this指向window对象 "use strict"; console.log("严格模式"); console.log("在全局作用域中的this"); console.log("this.docume

Javascript的严格模式strict mode详细介绍

"严格模式"(strict mode)是ECMA-262 Edition 5定义的新语法,表示要用严格的Javascript语法来执行,有一些过去惯用的写法就会抛出SyntaxError异常,例如:1.变量前没有用var宣告2.使用八进制语法:var n = 023和var s = "\047"3.使用with语句4.使用delete删除一个变量名(而不是属性名):delete myVariable5.使用eval或arguments作为变量名或函数名6.使用未来保

JavaScript起点(严格模式深度了解)

严格模式(Strict Mode)是ECMAScript5新增的功能.ECMAScript5虽然可以向后兼容ECMAScript3,但如果使用严格模式,哪些ECMAScript5"不在建议使用"的ECMAScript3语法功能将会被全部进制,如果出现就会抛出一行.引入Strict Mode目的是允许开发人员能够选择"更好"的Javascript版本,这个版本能用不同的方式处理那些普遍而又臭名昭著的错误.目前所有的主流浏览器的最新版本--包括IE10与Opera12-

老生常谈 js中this的指向

在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1.函数调用模式 当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window) window.value=1; function getValue(){ console.log(this.value); } getValue();//输出1,此时的thi

理解javascript中的严格模式

一.什么是严格模式 我们平时写的JavaScript代码一般都运行在正常模式中的,除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).看名字就知道,这种模式会让JavaScript在更严格的环境中运行. 包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱.(github上面好多项目都是用的严格模式) 二.启用严格模式 为整个脚本启用严格模式 在所有语句之前放一个特定语句 "use strict"

深入理解js函数的作用域与this指向

函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: • 函数的调用方式:直接调用,call/apply,with • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. • 对于直接定义的函数,this指向window. • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回thi

聊一聊JS中this的指向问题

JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说. this的指向: 1.this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁. 来看两个栗子: oBtn.onclick = function(){ alert(this); //oBtn } oBtn[i].onclick = fn

JS中改变this指向的方法(call和apply、bind)

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

JS中this的指向以及call、apply的作用

在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种: 1.当函数作为普通函数调用时,this 指向全局对象 2.当函数作为对象的方法调用时,this 指向该对象 3.当函数作为构造器调用时,this 指向新创建的对象 示例一: window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname 示例二: v

聊一聊JS中的prototype

什么是prototype: function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别.在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constructor对象,而这个constructor对象恰恰就是这个function函数本身. //判断是否是数组 function isArray(obj) { ret

js中this的指向问题归纳总结

前言 js中this指向问题是个老生常谈的问题了,下面这篇文章再来给大家介绍下,大家可以看看,更深入的了解了解,下面话不多说了,来一起看看详细的介绍吧 this this:上下文,会根据执行环境变化而发生指向的改变. 1.单独的this,指向的是window这个对象 alert(this); // this -> window 2.全局函数中的this function demo() { alert(this); // this -> window } demo(); 在严格模式下,this是

Angular.JS中的this指向详解

[this详解] 1.谁最终调用函数,this指向谁. ① this指向的,永远只可能是对象!!!!!! ② this指向谁,永远不取决于this写在哪!!而是取决于函数在哪调用. ③ this指向的对象,我们称之为函数的上下文context,也叫函数的调用者 2.※※※※※this指向的规律(与函数调用的方式息息相关): this指向的情况,取决于函数调用的方式有哪些: ① 通过函数名()直接调用:this指向window ② 通过对象.函数名()调用的:this指向这个对象 ③ 函数作为数组

关于JavaScript中的this指向问题总结篇

在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)

js中apply和Math.max()函数的问题及区别介绍

下面给大家介绍js中apply和Math.max()函数的问题,具体内容如下所示: var arr=[1,3,6,3,7,9,2]; console.log(Math.max.apply(null,arr)); 一直搞不懂为什么这样可以算出一个数组的最大值?一直想不明白,请js高手指教一下. 答案1 Function.apply()是JS的一个OOP特性,一般用来模拟继承和扩展this的用途,对于上面这段代码,可以这样去理解: XXX.apply是一个调用函数的方法,其参数为:apply(Fun

浅谈JS中this在各个场景下的指向

为了保证的可读性,本文采用意译而非直译. 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 1. this 的奥秘 很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解. this 的功能很强大,但需要一定付出才能慢慢理解它. 对Java.PHP或其他标准语言来看,this 表示类方法中当前对象的实例.大多数情况下,this 不能在方法之外使用,这样就比较不会造成混淆. 在J要中情况就有所不同: this表示函数的当前执行上下文,JS 中函数调用主要有以下几种