JavaScript this的指向

this 的指向有几种情况:

  1. 全局对象(指向 window);
  2. 作为普通函数调用(指向 window);
  3. 作为对象方法调用(一般指向该对象);
  4. 构造器调用(一般指向构造器函数);
  5. Function.prototype.call 或 Function.prototype.apply 调用(指向 Function)。

1. 全局对象的this

 1 console.log(this); // this指向于window
 2
 3  function test(){
 4     console.log(11);
 5  }
 6  setTimeout(function(){
 7     console.log(this === window); // true
 8     this.test(); // 11
 9  });
10 //setTimeout() 和 setInterval()函数内部的 this 指针是指向于 window 的

2. 作为普通函数调用

1 var name = "longen";
2 function test(){
3     return this.name;
4 }
5 console.log(test()); // longen

3. 作为对象方法调用

1 var obj = {
2     "name": "我的名字改了",
3     getName: function(){
4         console.log(this); // 在这里this指向于obj对象了
5         console.log(this.name); // 打印 我的名字改了
6     }
7 };
8 obj.getName(); // 直接调用对象方法

以上是直接调用对象方法时,this 指向该对象,但是我们不能像下面这样调用对象的方法,运行函数 yunxi() 时就相当于调用了普通函数,这时 this 会指向 window :

 1 var name = "全局对象名字";
 2 var obj = {
 3     "name": "我的花名改为云溪了,就是为了好玩",
 4     getName: function(){
 5         console.log(this);  // window
 6         console.log(this.name); // 全局对象名字
 7     }
 8 };
 9 var yunxi = obj.getName;
10 yunxi();

4. 构造器调用

在 Javascript 中不像 Java 一样,有类的概念,在 JS 中只能通过构造器创建对象,当 new 运算符调用函数时,该函数会返回一个对象,一般情况下,构造器里面的 this 就指向返回的这个对象;

1 var Test = function(){
2     this.name = "xiao";
3 };
4 var test = new Test();
5 console.log(test.name); // xiao

注意:构造器函数第一个字母需要大写,这是为了区分普通函数和构造器函数。

但是也有例外的情况,当构造器返回了一个对象时,此时继续调用,this 指向返回的那个对象:

1 var obj = function(){
2     this.name = "xiao";
3     return {
4         "age": "27"
5     }
6 };
7 var test = new obj();
8 console.log(test.name); // undefined,此时 this 指向返回的对象,对象里只有 age 属性,所以返回 undefined

学习资源:javascript中的this详解

时间: 2024-08-28 17:48:28

JavaScript this的指向的相关文章

javaScript的this指向总结(原创)

在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下2:一般情况下this指向它的调用者3:es6的箭头函数中,this指向创建者,并非调用者4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) 1 const func = function () { 2 console.log(this

javascript this指针指向?

前言 理解javascript的指针就需要先了解js的执行环境和作用域!执行环境的定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象,环境中定义的所有的变量和函数都保存在这个对象中.虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它. 1.全局执行环境 全局执行环境是最外围的一个执行环境,根据js实现的宿主环境的不同,表示执行环境的对象也不一样.在web浏览器中认为window就是全局执行的对象.因此所有的全局变量和函数都是作为w

JavaScript中this指向

一.重点来了,this指向问题: 1.this指向之普通函数. 2.this指向之对象 3.this指向之构造函数 4.this指向之(call,apply)动态更改this指向. 二.具体分析如下 1.普通函数 // 第23行的调用者为null,this指向也为null,// 所以这时js把this指向了window对象,所以弹出的结果是// n,这样不好的是会污染全局函数内带this的操作,不能直接调用; 2.对象 // 第34行是对象的say方法指针指向了一个存在的函数say();// 所

十分钟彻底理解javascript 的 this指向,不懂请砸店

函数的this指向谁,和函数在哪里被定义的,函数在哪里被执行的没有半毛钱关系,只遵守下面的规律: 在非严格模式中: 1.自执行函数里面,this永远指向window; <script> var a = 1; var o = { a: 2, fn: (function(){ //自执行函数,在定义的时候就已经执行啦 console.log('自执行函数里面是window',this.a); //自执行函数里面的this指向的是window return function() { // 但是这里的

JavaScript this的指向问题

this的指向 在函数创建的时候,this的指向还未确定,它最终指向调用它的对象 window.onload=function(){ window.a="我的曾经" function da(){ console.log(this.a) } da() //我的曾经} 解:window对da()函数进行调用,故this指向window window.onload=function(){ window.a="我的曾经" var bn={ a:"小白",

JavaScript中this指向的简单理解

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不

JavaScript关键字this指向

在js中this始终指向一个调用函数的那个对象 var a='有种你干掉我啊'; //纯粹调用函数 function test(){ console.log(this.a);//默认指向全局对象 } //test();//=>windows.test() //作为对象的方法被调用 Function.prototype.log=function(){ console.log(this.a); } //此时t为一个函数对象,注意js中一切皆为对象,函数是特殊的对象,具有prototype而已 //t

JavaScript中this指向问题(函数的调用方式)

在ES6之前,函数内部的this是由函数的调用方式决定的 函数调用 var age = 18; var p ={ age : 15, say : function(){ console.log(this.age) } } var f1 = p.say; f1(); 这时是函数调用(是由window调用,即f1() = window.f1()). 此时结果为18,因为this指向window. 方法调用 var age = 18; var p ={ age : 15, say : function

图解javascript this指向什么?

原文:http://www.cnblogs.com/isaboy/p/javascript_this.html JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaSc