3.1 对象的方法

如果一个对象的属性值,是一个函数,我们称这个属性叫做这个对象的方法(methods)。

下面这个对象有一个属性叫做sayHello,它的值是一个匿名函数,所以我们把这个sayHello 叫做 obj 的方法。

JavaScript 面向对象(三)对象的方法及函数的上下文

我们用圆括号打点调用sayHello属性,这个属性的值是函数,所以就能圆括号执行。


3.2 函数的上下文

现在我们要研究的是函数的上下文(context),所谓的上下文就是指函数里面的 this 是谁。

JavaScript 面向对象(三)对象的方法及函数的上下文

当一个函数当做对象的方法被调用的时候,这个函数里面的 this 表示这个对象。

JavaScript 面向对象(三)对象的方法及函数的上下文

现在我们调用函数的时候,是通过obj打点调用的,所以现在这个 sayHello 函数的上下文就是 obj 对象,即 sayHello 函数内部的 this 指向 obj 。

但是,千万不要认为写在对象里面的函数,上下文一定是这个对象!

JavaScript 面向对象(三)对象的方法及函数的上下文

函数的上下文是什么,取决于函数怎么调用!而不是函数如何定义!

换句话说,函数的上下文是函数调用时表现的性质!不是函数定义的时候写死的性质!


3.3函数上下文五个规律


规律一:函数用圆括号调用,函数的上下文是window对象!

比如小题目:

JavaScript 面向对象(三)对象的方法及函数的上下文

函数function fun(){} 的上下文是什么!不要看它怎么定义,要看它怎么调用!!此时是 fun() 函数名加上圆括号直接调用,此时上下文就是window对象!

而我们知道,所有的全局变量都是 window 对象的属性注意:函数里面的局部变量,不是window的属性,不是任何东西的属性,它就是一个变量!!)



规律二:函数如果作为一个对象的方法,对象打点调用,函数的上下文就是这个对象!

比如下面的例子,我们把fun函数定义出来了,然后又把这个函数绑定给了obj对象的c属性,

JavaScript 面向对象(三)对象的方法及函数的上下文

调用的时候是 对象.函数()   

此时根据规律,函数里面的this 是这个对象,所以能够弹出10。



规律三:函数是事件处理函数,函数的上下文就是触发这个事件的对象

JavaScript 面向对象(三)对象的方法及函数的上下文

下面我们定义了一个fun,然后把这个fun当做了3个DOM元素的事件处理函数:

JavaScript 面向对象(三)对象的方法及函数的上下文

这个函数不会执行,直到用户点击了某个div 标签,此时点击谁,this就是谁!



规律四:定时器调用函数,上下文是window对象

JavaScript 面向对象(三)对象的方法及函数的上下文

函数fun被定时器调用,函数的上下文是window对象,每隔一秒钟弹出一次888。

做一个小例子吧,点击一个盒子,两秒钟之后变红:

JavaScript 面向对象(三)对象的方法及函数的上下文

JavaScript 面向对象(三)对象的方法及函数的上下文

上面这个程序是错误的,这是因为函数的最终调用者是定时器!所以函数的上下文是window对象,而window对象没有背景颜色。


怎么办?备份this!备份上下文!

在定时器外面的事件处理函数中,this 就是box1这个元素,此时我们可以备份上下文,把this存为局部变量self,后面的程序就用self 指代box1,还可以用_this 、that等等。

JavaScript 面向对象(三)对象的方法及函数的上下文

JavaScript 面向对象(三)对象的方法及函数的上下文



规律五:数组中存放的函数,被数组索引调用,this就是这个数组

比如:

JavaScript 面向对象(三)对象的方法及函数的上下文

此时这个函数是从数组中枚举出来然后加圆括号执行的,所以最终调用者可以认为是这个数组,上下文就是这个数组。


3.4 函数上下文小题目

题目1:

JavaScript 面向对象(三)对象的方法及函数的上下文

最终调用形式是对象.函数() 此时适用规律二,此时的 this 就是对象。


题目2:JavaScript 面向对象(三)对象的方法及函数的上下文

正确答案是2,这是一个标准面试题。


我们现在讲解这个题目,首先说说什么是 arguments.callee ,在函数内部,如果想得到函数自身,用 this 是不可能的,我们必须使用arguments.callee

JavaScript 面向对象(三)对象的方法及函数的上下文


JavaScript 面向对象(三)对象的方法及函数的上下文

弹出 true,因为 arguments.callee 就是fun自己。


函数的length是什么呢?我们做一个小实验:

JavaScript 面向对象(三)对象的方法及函数的上下文

函数的length是形参列表的长度,就是函数定义的时候写在fun()圆括号里面的字母个数,无视你的实参个数!也就是说arguments.callee.length 就是形参列表的个数。

arguments.length 表示实参个数,就是调用函数的时候传进来的实参个数。

JavaScript 面向对象(三)对象的方法及函数的上下文


此时我们看看刚才的题目:

JavaScript 面向对象(三)对象的方法及函数的上下文


函数的最终调用,是 arguments 对象进行方括号索引得到的这个函数,然后加圆括号调用的,所以符合规律2或者规律5,如果你认为 arguments 是对象,此时规律2 生效,如果你认为 arguments 是数组,也没事,规律5生效,此时无论如何,函数 fun 里面的 this 是 arguments 对象!所以 arguments 对象 callee 属性就是 f() 函数,它的长度就是形参列表个数,答案是2。


如果换成this.length ,答案就是4!

JavaScript 面向对象(三)对象的方法及函数的上下文



相关文章:

  • 2021-10-06
  • 2021-10-12
  • 2021-06-15
  • 2022-12-23
  • 2021-12-04
  • 2021-05-18
猜你喜欢
  • 2021-06-23
  • 2022-12-23
  • 2021-12-27
  • 2021-08-27
  • 2021-10-04
  • 2021-09-01
  • 2022-12-23
相关资源
相似解决方案