js中的this关键字详解[转]

本文实例分析了JavaScript中this的用法。分享给大家供大家参考,具体如下:

一."this"公理

this关键字永远都指向函数(方法)的所有者;

?


1

2

3

4

5

6

7

8

9

function fn1(){

  this

};

fn1(); //this=>window

oDiv.onclick=fn1; //this=>oDiv

oDiv.onclick=function(){

  this //this=>oDiv

  fn1(); //this=>window

}

?


1

<div onclick="this.fn1();"></div> //这种行间脚本的写法现在非常罕见

这里的this指向div,fn1()里的this指向window

?


1

2

3

4

5

6

7

8

9

var it=

{

  info:["腾讯","搜狐","新浪","百度"],

  getinfo:function()

  {

    alert(this.info.join(","));

  }

};

it.getinfo();

输出:腾讯,搜狐,新浪,百度

二.函数赋值给变量时的"this"问题

?


1

2

3

4

5

6

7

8

9

10

var it=

{

  info:["腾讯","搜狐","新浪","百度"],

  getinfo:function()

  {

    alert(this.info.join(","));

  }

};

var data=it.getinfo;

data();

输出:报错,TypeError: this.info is undefined

代码相当于

?


1

2

3

4

var data=function(){

  alert(this.info.join(","));

};

data();

这里的this指向window,这里的data是被赋值,如果是var data=it.getinfo();那就是调用,结果还是腾讯,搜狐,新浪,百度。如果alert(this.it.info.join(","));结果还是腾讯,搜狐,新浪,百度。

?


1

2

3

4

5

6

7

8

9

10

11

var info=["QQ","sohu","sina","baidu"]

var it=

{

  info:["腾讯","搜狐","新浪","百度"],

  getinfo:function()

  {

    alert(this.info.join(","));

  }

};

var data=it.getinfo;

data();

输出:QQ,sohu,sina,baidu

三.作为对象方法调用时的"this"问题

?


1

2

3

4

5

6

7

8

function test()

{

  alert(this.x);

}

var o={};

o.x=1;

o.t=test;

o.t();

输出:1

四.作为构造函数调用时的"this"问题

?


1

2

3

4

5

6

7

var x=2;

function test()

{

  this.x=1;

}

test();

alert(x);

输出:1

?


1

2

3

4

5

6

7

8

var x=2;

function test()

{

  this.x=1;

}

var o=new test();

alert(o.x);

alert(x);

输出:1,2

五.闭包中的"this"指向问题

?


1

2

3

4

5

6

7

8

9

10

11

12

var it=

{

  info:["腾讯","搜狐","新浪","百度"],

  getinfo:function()

  {

  function abc(){

      alert(this.info.join(","));

  }

  abc();

  }

};

it.getinfo();

输出:报错,TypeError: this.info is undefined

闭包中的this不能指向it

解决方法

?


1

2

3

4

5

6

7

8

9

10

11

12

13

var it=

{

  info:["腾讯","搜狐","新浪","百度"],

  getinfo:function()

  {

  var _this=this;

  function abc(){

      alert(_this.info.join(","));

  }

  abc();

  }

};

it.getinfo();

优点:无论外部函数名字(it)怎么变,都能指向info

时间: 2024-11-08 20:47:33

js中的this关键字详解[转]的相关文章

js中的this关键字详解

this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码 代码如下: function test(){ this.x = 1; } 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 下面分四种情况,详细讨论this的用法. 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 请看下面这段代码,它的运行结果是1.

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang

C\C++中的 struct 关键字详解

struct关键字是用来定义一个新的类型,这个新类型里面可以包含各种其他类型,称为结构体. 1. 什么是结构体 结构体(struct)是一种自定义的数据类型,就是把一组需要在一起使用的数据元素组合成一个新的类型.结构体的作用就是封装,以方便地使用这些封装到一起的属性. 新的类型与C++中基本类型int,库类型string一样.C++的关键字struct是从C语言中的struct继承过来的,它们之间有区别与联系. 2. C语言的struct: C语言可以使用结构体struct来存放一组不同类型的数

JS中的this用法详解

随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用法,下面这篇文章来详细探讨下: 1.this是啥? 简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this到底指啥东西却让很多人张二摸不着头脑.这里我们留个小悬念,希望看完这篇文章了你能回答出来this到底指什么. 2.this有啥用?

JS中的this对象详解

    JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂.这篇文章就来揭示其中的奥秘.      借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.这句话看似平常,可是要非常注意三个字:"运行时",这说明this关键字只与函数的执行环境有关,而与声明环境没有关系.也就是这个this到底代表的是什么对象要等到函数运行时才知道,有点类似函数定义时的参数列表只在函数调用时才传入真正的对象.理解了这一点对后面this关键字规律的掌握有很大帮助.     

js中三种作用域详解(全局,函数,块级)

1.全局变量:声明在函数外部的变量(所有没有var直接赋值的变量都属于全局变量) 2.局部变量:声明在函数内部的变量(所有没有var直接赋值的变量都属于全局变量) JS中变量申明分显式申明和隐式申明. vari=100;//显式申明 i=100;//隐式申明 在函数中使用var关键字进行显式申明的变量是做为局部变量,而没有用var关键字,使用直接赋值方式声明的是全局变量. 当我们使用访问一个没有声明的变量时,JS会报错.而当我们给一个没有声明的变量赋值时,JS不会报错,相反它会认为我们是要隐式申

js中时间new Date()详解以及实例

介绍 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1; myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) m

Vue.js中学习使用Vuex详解

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取.进行修改,并且你的修改可以得到全局的响应变更.下面咱们一步一步地剖析下vuex的使用:首先要安装.使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex : npm install vuex --save 然后 在src文件目录下新建一个名为store的文件