Js中this机制全解

JavaScript中有很多令人困惑的地方,或者叫做机制。

但是,就是这些东西让JavaScript显得那么美好而与众不同。

比方说函数也是对 象、闭包、原型链继承等等,而这其中就包括颇让人费解的this机制。

不管是新手还是老手,不仔细深抠一下还真闹不明白this倒地咋回事捏。

今天,我们 就一起看一下this倒地咋回事,别再为了this发愁了。

this是啥?
        简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this倒地指引啥东西却让很多人张二摸不着头脑。希望看完这篇文章了你能回答出来this到底指引个甚。

this有啥用?
有人肯定会问,既然this这么难以理解,那么为个甚还要用它呢?我们来看个例子:

function identify() {
        return this.name.toUpperCase();
}function sayHello() {
        var greeting = "Hello, I‘m " + identify.call( this );
        console.log( greeting );
}

var person1= {
        name: "Kyle"
    };
var person2= {
        name: "Reader"
};
identify.call( person1); // KYLE
identify.call( person2); // READER
sayHello.call( person1); // Hello, I‘m KYLE
sayHello.call( person2); // Hello, I‘m READER

这段代码很简单,我们定义了两个函数,分别为identify和sayHello。并且在不同的对象环境下执行了它们,达到了复用的效果,而不用为了在不 同的对象环境下执行而必须针对不同的对象环境写对应的函数了。

简言之,this给函数带来了复用。有人就会说,我不用this一样可以实现,如:

function identify(context) {
        return context.name.toUpperCase();
}
function sayHello(context) {
       var greeting = "Hello, I‘m " + identify( context);
       console.log( greeting );
}
var person1= {
        name: "Kyle"
};
var person2= {
        name: "Reader"
};
identify( person1); // KYLE
identify( person2); // READER
sayHello( person1); // Hello, I‘m KYLE
sayHello( person2); // Hello, I‘m READER

仔细一看,这位客官给出的解决方法的确也达到了类似的效果。赞一个!我想说的是,随着代码的增加,函数嵌套、各级调用等变得越来越复杂,那么传递一个对象 的引用将变得越来越不明智,它会把你的代码弄得非常乱,甚至你自己都无法理解清楚。

而this机制提供了一个更加优雅而灵便的方案,传递一个隐式的对象引 用让代码变得更加简洁和复用。

关于this的误解

相信很多童鞋是学过其它语言的,在很多编程语言中都有this的机制,惯性思维把其它语言里对它的理解带到了JavaScript中。同时,由于this这个单词的理解导致了我们产生了对它各种各样的误解。所以,开始前,我们先澄清下对它的误解。

误解一:this引用function本身

我们都知道,在函数里引用函数可以达到递归和给函数属性赋值的效果。而这在很多应用场景下显得非常有用。所以,很多人都误以为this就是指引function本身。例如:

function fn(num) {
        console.log( "fn: " + num );
        // count用于记录fn的被调用次数
        this.count++;
}
fn.count = 0;
var i;
for (i=0; i<10; i++) {
        if (i > 5) {
            fn( i );
        }
}
// fn: 6
// fn: 7
// fn: 8
// fn: 9
console.log( fn.count );// 0 -- 耶?怎么不是4?

上面我们想要记录fn被调用的次数,可是明显fn被调用了四次但count仍然为0。咋回事捏?

这里简单解释下,fn里第4行的自增隐式的创建了一个 全局变量count,由于初始值为undefined,所以每一次自增其实依然不是一个数字,你在全局环境下打印count(window.count) 输出的应该是NaN。而第6行定义的函数熟悉变量count依然没变,还是0。如果对这个执行结果不清楚的,欢迎去看我前些天的那篇博文(聊一下JS中的 作用域scope和闭包closure scope和closure),在这里你只需要知道,this引用的是function这种理解是错误的就行。 
这边就会又有人问了,既然this不是引用function,那么我要实现递归函数,该咋引用呢?

这里简单回答下介个问题,两种方法:①函数体内用函 数名来引用函数本身②函数体内使用arguments.callee来引用函数(不推荐)。

那么既然第二种方法不推荐,匿名函数咋引用呢?用第一种,并且
给匿名函数一个函数名即可(推荐)。

误解二:this引用的是function的词法作用域

这种误解欺骗的人可能更多一些。首先,澄清一下,this并没有引用function的词法作用域。的确JS的引擎内对词法作用域的实现的确像是一个对象,拥有属性和函数,但是这仅仅是JS引擎的一种实现,对代码来说是不可见的,也就是说词法作用域“对象”在JS代码中取不到。看个错误的例子:

function fn1() {
     var a = 2;
     this.fn2();//以为this引用的是fn1的词法作用域
}
function fn2() {
         console.log( this.a );
}
fn1(); //undefined

上面的代码明显没有执行出想要的结果,从而可以看到this并没有引用函数的词法作用域。甚至,可以肯定的说,这个例子里fn2可以在fn1里正确执行都是偶然的(理解了词法作用域你就知道为什么这里执行不报错了)

this到底跟啥有关?

好了,扯了那么多都没上干货,有的观众都开始关闭当前页开始离席了。这里,我们郑重声明:this跟函数在哪里定义没有半毛钱关系,函数在哪里调用才 决定了this到底引用的是啥。也就是说this跟函数的定义没关系,跟函数的执行有大大的关系。所以,记住,“函数在哪里调用才决定了this到底引用 的是啥”。

this机制的四种规则

this到底绑定或者引用的是哪个对象环境决定于函数被调用的地方。而函数的调用有不同的方式,在不同的方式中调用决定this引用的是哪个对象是由四种规则确定的。我们一个个来看。

默认绑定全局变量

这条规则是最常见的,也是默认的。当函数被单独定义和调用的时候,应用的规则就是绑定全局变量。如下:

function fn() {
         console.log( this.a );
}
var a = 2;
fn(); // 2 -- fn单独调用,this引用window

隐式绑定

隐式调用的意思是,函数调用时拥有一个上下文对象,就好像这个函数是属于该对象的一样。例如:

function fn() {
     console.log( this.a );
}
var obj = {
     a: 2,
     fn: fn
};
obj.fn(); // 2 -- this引用obj。

需要说明的一点是,最后一个调用该函数的对象是传到函数的上下文对象(绕懵了)。如:

function fn() {
  console.log( this.a );
}
var obj2 = {
      a: 42,
      fn: fn
};
var obj1 = {
      a: 2,
     obj2: obj2
};
obj1.obj2.fn(); // 42 -- this引用的是obj2.

还有一点要说明的是,失去隐式绑定的情况,如下:

function fn() {
     console.log( this.a );
}
var obj = {
      a: 2,
      fn: fn
};
var bar = obj.fn; // 函数引用传递
var a = "全局"; // 定义全局变量
bar(); // "全局"

如上,第8行虽然有隐式绑定,但是它执行的效果明显是把fn赋给bar。这样bar执行的时候,依然是默认绑定全局变量,所以输出结果如上。

显示绑定

学过bind()\apply()\call()函数的都应该知道,它接收的第一个参数即是上下文对象并将其赋给this。看下面的例子:

function fn() {
     console.log( this.a );
}
var obj = {
     a: 2
};
fn.call( obj ); // 2

如果我们传递第一个值为简单值,那么后台会自动转换为对应的封装对象。如果传递为null,那么结果就是在绑定默认全局变量,如:

function fn() {
      console.log( this.a );
}
var obj = {
      a: 2
};
var a = 10;
fn.call( null); // 10

new新对象绑定

如果是一个构造函数,那么用new来调用,那么绑定的将是新创建的对象。如:

function fn(a) {
     this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );// 2

注意,一般构造函数名首字母大写,这里没有大写的原因是想提醒读者,构造函数也是一般的函数而已。

时间: 2024-10-10 08:36:26

Js中this机制全解的相关文章

js中window对象详解以及页面跳转

js中window对象详解以及页面跳转 转自:http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%90%9C/39219.shtml 1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp" 3. window.top.location.replace("index.asp");

JS中表格的全选和删除要注意的问题

在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. 以下是我自己做的一个小例子,用来更简单明了的说明js全选和删除. 一.全选的说明:当选中全选的checkbox时,下面1-5都会选中,没有选中时1-5都不会选中,这个实现不难,步骤如下: 1.获取全选框的选中状态, 2.for循环设置所有的单选框的选中状态 主要代码: //1.获取全选按钮 var

Bom和Dom编程以及js中prototype的详解

一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ

JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

  前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐渐淘汰:而面向过程的语言也只有C语言老大哥依然坚挺:现在主流的语言(例如Java.C++.PHP等)都是面向对象的语言. 而我们的JavaScript语言,恰恰介于面向过程与面向对象之间,我们称它为"基于对象"的语言.但是,JS中的OOP依

Java中反射机制详解

序言 在学习java基础时,由于学的不扎实,讲的实用性不强,就觉得没用,很多重要的知识就那样一笔带过了,像这个马上要讲的反射机制一样,当时学的时候就忽略了,到后来学习的知识中,很多东西动不动就用反射,所以回过头来把这个给重新补一下,自己欠下的债,迟早是要还的. ---WH 一.什么是反射? 在运行状态中,对于任意一个类,都能够获取到这个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法和属性(包括私有的方法和属性),这种动态获取的信息以及动态调用对象的方法的功能就称为java语言的

JS中的showModelDialog详解和实例

1.<a href="#" onclick="SeePic('${list.PATH}')"><font color="blue">预览</font></a> <a href="#" onclick="deleteProjectPic(${list.SPID})"><font color="blue">删除</

js中String常用方法详解及String对象方法扩展

一.JavaScript 中 slice .substr 和 substring的区别: 1: String.slice(start,end): 一个新的字符串.包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符. 2: String.substring(start,end) 这个就有点特别了,它是先从start,end里找出一个较小的值. 然后从字符串的开始位置算起,截取较小值位置和较大值位置之间的 字符串,截取出来的

JS中document.cookie详解

什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; document.cookie看上去就像一个属性,可以赋不同的值.但它和一般的属性不一样,改变它的赋值并不

[转]JS 中 this 关键字详解

本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调用 Function.prototype.bind方法 es6箭头函数 但是不管函数是按哪种方法来调用的,请记住一点:谁调用这个函数或方法,this关键字就指向谁. 接下来就分情况来讨论下这些不同的情况: 普通函数调用 function person(){ this.name="xl";