javascript中几种this指向问题

  首先必须要说的是,this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象

(1)、作为函数名调用

  函数作为全局对象调用,this指向全局对象

function a(){
var author = "lry";
console.log(this.author); //undefined
console.log(this); //Window
}
a(); //其实这是相当于 window.a()

(2)、作为方法调用

  函数作为对象中的一个属性,成为该对象的一个方法,this指向该对象

var o = {
author:"lry",
fn:function(){
console.log(this.author); //lry
}
}
o.fn(); //this => o

(3)、使用构造函数调用

  使用new调用的函数,则其中this将会被绑定到那个新构造的对象。(首先new关键字会创建一个空的对象,然后会自动调用一个函数方法(apply...),将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代)

function Fn() {
this.author = "lry"
}
var o = new Fn();
console.log(o.author); //lry

(4)、apply或call调用

  自行改变this指向,函数this指向apply或call方法调用时的第一个参数

var o = {
author:"lry",
fn:function(){
console.log(this.author); //lry
}
}
var b = o.fn;
b.call(o); //或者 b.apply(o)

补充:

  this的最终指向的是那个调用它的对象(大多数可以这么理解,但并不是准确的)

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

这里的this为什么不是指向o?如果按照上面的理论,最终this指向的是调用它的对象,因为 如果一个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。看下面例子:虽然对象b中没有属性a,但this仍然指向的是它的上一级对象b

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

特殊情况:

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

这是的this指向的是window...为什么呢?如果你还没缓过神来的话,那你可能没有理解this指向的永远是最后调用它的对象。

如有错误,欢迎指正~~~

javascript中几种this指向问题的更多相关文章

  1. [js]javascript中4种异步

    javascript中4种异步: 1.ajax 2.定时器 3.事件绑定 4,回调 定时器 //顺序执行 /* var s = 0; for (var i = 0; i < 10000; i++ ...

  2. JavaScript中两种类型的全局对象/函数【转】

    Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...

  3. JavaScript中四种不同的属性检测方式比较

    JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...

  4. JavaScript 中 4 种常见的内存泄露陷阱

    了解 JavaScript 的内存泄露和解决方式! 在这篇文章中我们将要探索客户端 JavaScript 代码中常见的一些内存泄漏的情况,并且学习如何使用 Chrome 的开发工具来发现他们.读一读吧 ...

  5. javascript中五种基本数据类型

    前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...

  6. javascript中6种基本数据类型详解

    javascript中有5中数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——object,object本质是由一组键值 ...

  7. JavaScript中七种数据类型·中·一

    Standing on Shoulders of Giants; 说到JavaScript里的类型很容易就让人想起 42和"42",分别是string型和number型,但是他们可 ...

  8. Javascript中两种最通用的定义类的方法

    在Javascript中,一切都是对象,包括函数.在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义.但Javascript中提供了一种折中的方案:把对象定 ...

  9. JavaScript中的this对象指向理解

    在JavaScript中,this不是固定不变的,它的指向取决于上下文环境,一般的,认为this指向使用它时所在的对象.主要有以下几类指向: 在方法中,this 表示该方法所属的对象. 如果单独使用, ...

随机推荐

  1. 学习 JavaScript 树

    学习 JavaScript 树 树(Tree) 在计算机科学中,数据结构是一门研究非数值计算的程序设计问题中计算机的操作对象(数据元素)以及它们之间的操作和运算等的学科. 它包含三方面的内容: 数据的 ...

  2. Internet Of Things

  3. Windows怎样共享文件夹给Virtualbox 里面的Ubuntu

    主要命令 1.  sudo mount -t vboxsf Share /media/sf_Share 2.   sudo adduser userid vboxsf

  4. GridCellChoiceEditor

    choice_editor = wx.grid.GridCellChoiceEditor(choices_list, True) grid.SetCellEditor(row, col, choice ...

  5. I want to be a Great Web Front-end Developer

    有时觉得特别的浮躁,可能是每天春运般的挤地铁,随处可见因为一点小磕小蹭吹胡子瞪眼睛的人,可能是身边的人貌似一下子都好有钱,买房买车或者买第N套房. 很想静下来心寻找到自己inner pace,但是忽然 ...

  6. Jmeter入门17 获取时间点前后一定间隔的时间 __timeShift()

    接口获取时间点前后一定间隔的时间函数: __timeShift(时间格式, 特定时间点(缺省当前时间),时间间隔,地区格式(默认),变量名( 可不填,填写后其他地方用${变量名}引用 )) 举例: 1 ...

  7. 【LOJ6060】「2017 山东一轮集训 Day1 / SDWC2018 Day1」Set(线性基)

    点此看题面 大致题意: 让你把\(n\)个数分成两部分,使得在两部分异或和之和最大的前提下,两个异或和中较小的那个尽量小.输出最优的较小异或和. 线性基 关于线性基,可以看一下这篇博客:线性基入门. ...

  8. c语言实现数组的转置

    #include<stdio.h> int main (){ int i,j,m,n; ][],b[][]; printf("请输入行列式的行数:\n"); scanf ...

  9. dijkstra 最小费用最大流

    前言:众所周知:spfa他死了 滑稽 dijkstra同样为最短路算法,为什么不能跑费用流qwq 好像是因为有负权边的缘故 但是如果我们如果使用某种玄学的将边权都拉回到正数的话 就可以跑了dijkst ...

  10. google为什么将爬虫从python移植到C++

    这是好几年前Quora上的一个问题,有点过时,但看了之后感觉不错,就总结了一下 原文链接:http://www.quora.com/Why-did-Google-move-from-Python-to ...