浅谈js中this指向问题

this 指的是当前对象,如果在全局范围内使用this,则指代当前页面window;如果在函数中使用this,则this指代什么是根据当前函数是在什么对象上调用。我们可以使用call和apply改变函数中this的具体指向。

console.log(this === window)  // true
console.log(window.alert === this.alert)  // true
console.log(this.parseInt("021",10))  // 21
parseInt(string,radix);
// 当只使用一个参数时,我们都知道是将其转为整数;
// radix 取值为 2~36,表示当前数是几进制,并将这个数转成十进制,当不在这个范围时,会输出NaN;          

函数中的this是在运行时候决定的,而不是函数定义时。

function foo(){
            console.log(this.fruit);
    }
    // 定义一个全局变量,等同于window.fruit = "banana";
    var fruit = "banana";
    // 此时函数中的this指向window;
    foo();  //   "banana"

    var  o = {
          fruit : "apple",
          foo : foo
    };
    // 此时函数中的this指向o
    o.foo();  // "apple"

全局函数apply和call可以用来改变this的指向,如下:(apply和call的唯一区别,就是在传参的时候,apply的参数需要放在一个数组里面,而call不需要)

function foo(){
            console.log(this.fruit);
    }
    // 定义一个全局变量,等同于window.fruit = "banana";
    var fruit = "banana";

    var  o = {
          fruit : "apple"
    };

    foo.apply(window);  // "banana";
    foo.call(o);  // "apple";

因为在JavaScript中,函数也是对象,我们看下面这个例子:

function foo(){
 2          if(this === window){
 3              console.log("this is window");
 4         }
 5     };
 6     // 函数foo也是对象,可以为对象定义属性,然后属性为函数
 7     foo.boo = function(){
 8         if(this === foo){
 9              console.log("this is foo");
10         }else if(this === window){
11                 console.log("this is window");
12             }
13     };
14
15     // 等价于 window.foo();
16     foo();  // "this is window";
17     // 可以看到函数中this的指向调用函数的对象
18     foo.boo();  // "this is foo";
19     // 可以使用call改变函数中this指向
20     foo.boo.call(window); // "this is window";

对象中的嵌套函数的this指向不是当前对象,而是window,看如下例子:

var name = "window.name";
      var obj = {
          name : "obj.name",
          getName:function(){
              console.log(this.name);
              return function(){
                  console.log(this.name);
              }
          }
      }
      obj.getName()();  // "obj.name"  "window.name"

同样是obj调用的getName和getName里面的方法,结果却是不同的值,这就说明嵌套函数中的this已经不指向当前对象了,而指向window。

那么,我们要怎样解决上述问题呢?主要有三种解决办法,如下:

1.使用函数的bind方法,绑定当前this;

 var name = "window.name";
 2       var obj = {
 3           name : "obj.name",
 4           getName:function(){
 5               console.log(this.name);
 6               return function(){
 7                   console.log(this.name);
 8               }.bind(this);
 9           }
10       };
11       obj.getName()();  //  "obj.name"  "obj.name"

2.使用变量将上面的this接收一下,然后下面不使用this,使用那个变量;

 var name = "window.name";
 2       var that = null;
 3       var obj = {
 4           name : "obj.name",
 5           getName:function(){
 6               that = this;
 7               console.log(this.name);
 8               return function(){
 9                   console.log(that.name);
10               }
11           }
12       }
13       obj.getName()();  //  "obj.name"    "obj.name"

3.使用ES6的箭头函数,可以完美避免此问题;

 var name = "window.name";
 2       var obj = {
 3           name : "obj.name",
 4           getName:function(){
 5               console.log(this.name);
 6               return () => {
 7                   console.log(this.name);
 8               }
 9           }
10       }
11       obj.getName()();    //  "obj.name"    "obj.name"

原文地址:https://www.cnblogs.com/zhaosijia----1234/p/8973364.html

时间: 2024-10-28 14:58:03

浅谈js中this指向问题的相关文章

浅谈js中的this关键字

浅谈js中的this关键字 全局作用域中的this 函数作用域中的this 不同函数调用方法下的this 直接调用 作为对象的方法调用 作为构造函数调用 通过call或apply方法调用 嵌套函数作用域中的this 浅谈js中的this关键字 this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示,权当交流之用. 全局作用域中的this 本文将以作用域由

浅谈js中继承的理解和实现

一.前言 java.C#等正统面向对象语言都会提供类似extend之类的处理类的继承的方法,而javascript并没有提供专门的方法用于继承,在javascript中使用继承需要一点技巧.js中实例的属性和行为是由构造函数和原型两部分组成的,js的继承也分为这两部分.下面给大家分享一下在js中如何实现继承,讲的不对的地方望大家指正! 二.继承构造函数中的属性和行为 我们定义两个类Animal和Bird类,来实现js中类的继承. //定义Animal类 function Animal(name)

浅谈js中arguments对象

一.先来看看到底是个啥? arguments对象在JS中应该算数比较特殊的对象.不能显示的创建,只在当前函数调用的时候才可以使用,长得有点像数组,但绝对不是Array的实例. 几点说明: 1.1.arguments实际上是当前函数的一个内置属性,在当前函数内,函数名.arguments等价于arguments,在函数外单独使用arguments是没有意义的; 1.2.arguments对象的长度由实际参数个数决定.1.3.函数中的形参和实参是可以相互影响的. 可以看出,当传入的实参个数少于形参个

浅谈js中的九个算法

排序很多时候都会用到,而在js中排序的算法有九个是人们常用的,而且使用起来可以很流畅.本文将对这九种排序算法进行详细介绍,教程尚硅谷JavaScript DOM视频教程还有详细的代码分享哦. 一.插入排序 1)算法简介插 入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是 通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-place排序(即只需用到 O(1)的额外空间的排序),因而在从后向前扫描

浅谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器) 本文将用一个经典的例子todoList来展开 一个事件发生的过程(通信单向流动): 1.用户在视图V上与应用程序交互 2.控制器C触发相应的事件,要求模型M改变状态(读写数据) 3.模型M将数据发送到视图V,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事件),用来驱动模型和模型结合 所以js

浅谈js中的数据类型,使用typeof获取js数据类型

JS中的数据类型 1):Undefined——值未定义 注:Undefined类型只有一个值,即特色的undefined.在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined 2):boolean——布尔值 注:true和false是区分大小写的.也就是说,True和False(以及其他的混合大小写形式)都不是Boolean值,只是标识符 3):string——字符串 注:用双引号和单引号表示的字符完全相同 4):number——数值 注:表示整数和浮点数值 5):Nul

浅谈JS中的闭包

今天 大年初一,祝各位小伙伴们狗年旺旺啊,闲来也没事,只能钻研一下自己的分内之事,也就是作为一个前端码农的身份,得时刻保持学习的态度,温故而知新,每天都给自己一个小目标去完成,日积月累,所想达到的状态,都会有所见长. JS中的闭包,想必,做web开发的程序猿们都有一定的认识吧,不仅仅是js里有这种特性,而且弱语言类型的譬如python里也是有闭包这么一个强大的特性的,对于老司机们来说,闭包可真的是一个很好的东西,但是对于新入门的菜鸟们来说,闭包却是一个难以搞得清楚的特性,很多情况下,会用,但是却

浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

var num = 1;    var str = '1';    var test = 1;    test == num  //true 相同类型 相同值    test === num //true 相同类型 相同值    test !== num //false test与num类型相同,其值也相同, 非运算肯定是false    num == str  //true 把str转换为数字,检查其是否相等.    num != str  //false == 的 非运算    num ==

浅谈JS中的typeof和instanceof的区别

JS中的typeof和instanceof常用来判断一个变量是否为空,或者是什么类型. typeof typeof运算符返回一个用来表示表达式的数据类型的字符串. typeof一般返回以下几个字符串: "number", "string","boolean","object","function","undefined" 对于Array,Null等特殊对象使用typeof一律返回obje