js函数中this的指向

本文是我个人对this指向的一些理解,如有不足之处,还望大家可以批评指正,在此先谢过了!

首先,我们来回顾一下ES5里函数的几种调用方式:

1??直接调用

foo(); 

2??方法调用

obj.foo();

以上两种调用方法,this的指向可以这样去确定: 函数的调用者就是this的指向!

例如 obj.foo(); 里.foo()前面obj就是调用者,所以this的指向就是obj,而直接调用的foo()等价于window.foo();这样的话,上面两种调用方法的this指向就显而易见了,1??的this是window,2??的this是obj

举个栗子:

1.关于直接调用

function foo(){
  console.log(this)
}
foo()

这个foo()等价于window.foo(),所以this的指向就是window

2.关于方法调用

var obj = {
  foo: function(){
    console.log(this)
  }
}
obj.foo();这里foo的调用者是obj,所以this的指向就是obj 

3??call/apply

obj.foo.call(context,parma)/obj.apply(context,[parma]);

关于 call/apply调用,context是谁,this指向的就是谁。需要注意的是,当context值为undefined/null的时候,this指向的是window,this的指向还是undefined/null。

相信看到这里,大家应该对this的指向有一定的理解了吧,最后再来个个人认为对我们初学者来说很恶心的一个栗子:

function fn (){ console.log(this) };function fn2(){ console.log(this)};
var arr = [fn, fn2]
arr[0]();    我擦,这个也没有点语法(就是obj.foo())调用,看样子长得很像foo()这种调用方式,那它的this指向是window吗?ma蛋,事实上并不是,它的this指向的是arr,那么为什么呢?    首先arr是一个数组,而数组也是对象,也就是obj,访问obj内部元素有两种方式[]语法和.语法,也就是obj[key]和obj.key,数组里面的index就可以看作是obj里的key,所以在这里,它不是没有点语法调用吗?那我们就给他改造成点语法,也就是这样arr.0(),最后也就不难理解,这个this的指向就是arr了,但切记,数组里面内容的访问只能是arr[index]语法,实际应用千万不要写arr.index!!!这里只是为了方便理解。

小结:

1.call/apply的调用方式自不用说,this指向就是context值,切记当context值为undefined/null的时候,this指向的是window,this的指向还是undefined/null。;

  2.obj.foo();的this指向就是obj

  3.直接调用foo();转换成点语法调用就是window.foo();所以this的指向就是window;

  4.最恶心的就是那种看似是foo();的骗子们,这时候我们一定要想办法给它转换成点语法调用来帮助我们找到this指向(比如上面数组的栗子)。

  5.如果是一大串点语法调用的,像这样 obj1.obj2.obj3.foo();  我们只需要看离foo最近的那个obj就行了,这个栗子里的this指向也就是obj3;

  总之一句话,套路再多我们也不用管,只要看到是谁最后调用的函数,函数内的this就指向谁!!!

最后祝愿大家都不再被this指的晕头转向!!!

  

时间: 2024-11-09 07:15:12

js函数中this的指向的相关文章

js闭包中的this(匿名函数中的this指向的是windows)

1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的this指向对象的两种方法 可以使用对象冒充强制改变this:call().apply()        将this赋值给一个变量,闭包可以访问这个变量 一.this问题 匿名函数的执行环境具有全局性,因此其this对象通常指向window(当然,在通过call()或者apply()改变函数执行环境的情况下,this就会指向其他对象) 为什么匿名函数没有取得其包含作用域(或外部作用

改变函数中的 this 指向——神奇的call,apply和bind及其应用

在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行详细的讲解,并列出几个经典应用场景. 1.call(thisArgs [,args...]) 该方法可以传递一个thisArgs参数和一个参数列表,thisArgs 指定了函数在运行期的调用者,也就是函数中的 this 对象,而参数列表会被传入调用函数中.thisArgs 的取值有以下4

js函数中获得当前被点击元素

问题描述:在html页面中点击<a>或者’按钮‘,进入js中的函数,在js函数中获得被点击那个<a>或‘按钮’元素 解决方法:方法一: html中: <a>标签:<a id="21" href="javascript:void(0);" onClick="fun(event)">点击我</a> 按钮:<input type="button" value=&quo

在JS函数中执行C#中的函数、字段

1.调用字段 cs文件的代码: public int id = 0; protected void Page_Load(object sender, EventArgs e) { id = 2; } js页面的代码: function CheckFunc() { alert("<%= id%>"); } 2.调用函数: 在JS函数中访问或执行C#.NET中的函数: 在JS函数中访问C#函数方法一: 首先建立一个按钮,在后台将调用或处理的内容写入button_click中;接

js函数中参数的传递

先看一道JS的笔试题: var setObj=function(o){ o.name="xiaoming"; o={}; o.name="xiaohong"; } var p={name:"xixi",age:24}; setObj(p); console.log(p); 答案是{name:xiaoming,age24}: 在JavaScript中函数参数默认为引用类型. 在阅读本章节之前建议参阅一下两章节:1.值类型可以参阅javascript

js函数中的this关键字

关于这个this关键字,也是很多项目中常常被用到的,那么,有人也许会问,干嘛要用this呢,在函数被调用时,直接指明是什么对象在调用不就行了?还整那么个模模糊糊的概念出来干嘛?不过嘛,存在即真理,既然有这么个东西,那也就有他存在的意义,下面来看看吧. 首先,我们要先回忆一下js函数都有哪几种调用的场合,有如下几种场合: 1.很常规的调用(即直接调用,其实你发现也是全局调用): 2.作为某个对象的豆哥方法被调用: 3.作为构造函数,用来新建某个新对象(object): 4.很让人头大的apply调

js 函数中的 this 问题

昨天做了百度的前端笔试题,其中有一个问输出结果的题,感觉有点懵,平时js是用到哪看到哪,没有研究这么深入.现在整理一下. 题目: var myObject={ foo : "", func : function(){ var self = this; console.log("outer func : this.foo = " + this.foo ); console.log("outer func : self.foo = " + self.

js函数中this的不同含义

1.js函数调用过程中,js线程会进入新的执行环境并创建该环境的变量对象,初始化变量对象时会自动添加两个变量:this和arguments,因此可以在函数中使用这两个变量.需要注意的是,this变量不能重新赋值,而arguments可以,如下: function test() { var name = 'test2'; arguments = window; this = window; // 在这一行js运行会报错 } 2.this取值于函数据以执行的函数对象 2.1 当函数在全局作用域执行时

JS 函数中的arguments,call,apply

JS 函数定义的时候的参数和调用时的关系调用时实际传递的参数可以比定义的参数多或者少,见下面的两个例子 <script> function test(a,b,c){ console.log(a); } test('a'); test('a','b','c'); </script> <script> function test(a){ console.log(a); } test('a'); test('a','b','c'); </script> JS的方法