嵌套函数中的this指向的对象

來源：http://www.cnblogs.com/mier/archive/2009/05/07/1452231.html

我们通过一个测试来举出所有的情况,然后用自己的debug方法输出结果来判断嵌套时的this指向的对象是自己还是父对象

下面是这个测试的前提html和css代码,用来显示测试结果:

css和html代码
1

< style type ="text/css" >

.block {

} {
3

margin-top : 5px ;
4

padding : 10px ;
5

font-family : Verdana ;
6

font-size : 12px ;
7

background-color : #e0ecf9 ;
8

width : 90% ;
9

overflow : hidden ;
10

border : 1px #4B8FE3 solid ;
11

padding-left : 4px ;
12

}
13

</ style >
14

< div id ="debug1" class ="block" >
15

.
16

</ div >

之后是一些增加的系统函数,用来更方便的实现某些测试功能:

基础代码
1

function $$(ele)

{
2

return document.getElementById(ele);
3

}
4

function adddebug(e1,e2)

{
5

$$( " debug1 " ).innerHTML += e1 + " : " + e2 + " <br /> " ;
6

}
7

// 用来显示当前对象的所有属性和方法,用来测试this所指的对象,以及输出所有的属性的值
8

Object.prototype.printToScreen = function (objname,ele)

{
9

div = document.createElement( " div " );
10

div.className = " block " ;
11

div.innerHTML += " 当前对象+ " + objname + " <br /> " + " <HR/> " ;
12

count = 7 ;
13

for (i in this )

{
14

if (count == 0 )

{div.innerHTML += " 此对象含有大量的属性,已经省略之 " ; break ;}
15

div.innerHTML += " <font color=#ff00ff> " + i + " </font> " + " : " + " <font color=#0ff00d> " + this [i] + " </font> " + " <br /> " ;
16

count -- ;
17

}
18

$$( " debug1 " ).appendChild(div);
19

}

为了测试在不同情况下嵌套函数(对象)中this所指的对象,我们写了如下的代码(在代码中已经标识出各种情况的分析结果):

测试代码
1

function testA()

{
2

this .name = " a " ;
3

this .func1 = function ()

{
4

this .name1 = " a1 " ;
5

this .name = " b " ;
6

this .printToScreen( " func1 " , " debug1 " );
7

// 这里的this指向了外部函数的this
8

}
9

this .func1();
10

function func2()

{
13

this .name1 = " b1 " ;
14

this .name = " c " ;
15

this .printToScreen( " func2 " , " debug1 " );
16

// 这里的this不指向外部的this,而是自身环境的this
17

}
18

var func2 = new func2();
19

var func3 = function ()

{
22

this .name1 = " b1 " ;
23

this .name = " c " ;
24

this .printToScreen( " func3 " , " debug1 " );
25

// 这种方式也不影响外部的值,this指向自身的环境
26

}
27

func3();
28

this .a = function func4()

{
30

this .name1 = " b1 " ;
31

this .name = " c " ;
32

this .printToScreen( " func4 " , " debug1 " );
33

// 这种方式也会影响外部的this,这里的this指向外部的this
34

}
35

this .a();
36

}
38

var testa = new testA();
39

this .name = " aa " ;
40

this .func5 = function ()

{
41

this .printToScreen( " func5 " , " debug1 " );
42

}
45

this .func5();

总结:

javascript中的函数是顶级对象,每次创建一个函数的时候我们就会为其创建一个运行环境,这个环境中包含一个作用域链属性,它可以指向外部的对象来实现外部变量对于函数内部是可见的(具体在其他文章中讨论闭包的时候讨论),所以在javascript中函数是可以嵌套的 , 也就是说在定义了一个函数后,在函数内部仍然可以定义一个函数,而且外部函数内定义的变量在内部函数中是可见的(在php中则是不可见的),通过环境中的作用域链,内部函数在初始化的时候顺着作用域链可以找到其外部任何层级的函数(对象)中的变量.在完成一系列初始化工作后,将给当前的this赋值,this属性指向运行环境所指向的对象本身,所以在全局环境中我们也可以使用this关键字,这时它指向全局对象.

我们这里考虑的是javascript中this指针指向的对象,当在某个函数内嵌套一个函数的时候,有好几种方法,可以将内部函数直接复制给外部函数对象的一个属性,也可以单独创建一个函数.这些不同的方法中在内部对象中使用this指针所指向的对象是不同的.通过上面的例子可以看到不同的情况下this所指向

上面的所有情况其实分为两大种:

第一种是在外部函数的内部直接定义一个对象,这个对象不作为外部对象的属性出现:

这种情况下内部函数中的this指向此内部函数,这是正常创建函数的方法,所以会为内部函数创建自己的运行环境,this指向这个运行环境

第二种情况是定义一个函数,然后赋给外部对象的一个属性.

这种情况下并不会给这个内部函数创建运行环境,而是以外部对象的运行环境作为当前的运行环境,所以这时候this指向的是外部的对象.

嵌套函数中的this指向的对象相关推荐

深入理解call、apply、bind（改变函数中的this指向）
在JavaScript中call.apply.bind是Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行 ...
python函数def里面嵌套def,python菜鸟求问关于嵌套函数中作用域范围应该怎么理解？，python嵌套,直接上代码def l(l...
python菜鸟求问关于嵌套函数中作用域范围应该怎么理解?,python嵌套,直接上代码def l(l 直接上代码def l(list): def d(): return list return d ...
ES6箭头函数中的this指向
1箭头函数中的this (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this (2)箭头函数中的this指向 :访问上一个作用域的thi ...
React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件总结一下没有绑定this的函数中的this指向不管 ...
模板字符串`${}` 各种函数中的this指向？
let name="小明" let age="18" console.log(`${this.name}已经${age}岁了`)//输出:小明已经18岁了 ** ...
关于setTimeout函数中的this指向问题
为什么setTimeout函数的延迟执行函数中this指向window,但是延迟执行函数是箭头函数this指向obj? 根据下面的两点原因解释,foo和foo2中的this都指向obj,但是其中set ...
关于函数中的this指向问题
关于函数中的this指向问题前言一.普通函数中this指向二.对象里面的this指向三.函数表达式中的this指向四.立即执行函数的this指向五.定时器计时器中this的指向六.箭头函 ...
JavaScript学习（七十）—函数中this的指向问题
JavaScript学习(七十)-函数中this的指向问题一.这些this的指向,是当我们调用函数的时候确定的,调用方式的不同决定了this的指向不同,一般指向我们的调用者
不要在循环，条件或嵌套函数中调用 Hook
只在最顶层使用 Hook 不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层调用他们.遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用.这让 ...

嵌套函数中的this指向的对象

嵌套函数中的this指向的对象相关推荐

最新文章

热门文章