javascript中This用法的实例教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript中This用法的实例教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6034字，纯文字阅读大概需要9分钟。

内容图文

this关键字是js中最最复杂的机制之一。他被自动定义到所有函数的作用域中。

在学习这个关键字的过程中似乎也走了很长时间的弯路。你要问我为什么走了很长时间的弯路，关键的地方还是没有对核心的概念彻底学习和领会，这一点和小学生学习新知识没有任何区别。要想掌握this这个关键字，需要紧扣关键概念，不要凭空想象这到底是怎么一回事。

关键概念：js中的函数在调用的时候，一定，一定，一定会绑定在一个对象上，在分析this关键字的时候，一定要知道函数在调用的时候这个对象到底是谁？。
切记：js中函数的调用和定义是没有任何关系的，函数所绑定的对象直到他被调用的时候才能知道。

this关键字的不确定定是把双刃剑，一是函数调用时的对象不确定性，是js中函数的使用具有很大灵活性，每个对象都可以借用其他函数来完成功能。二是这也造成了this学习的一些困扰。所以在学习的时候先要理解this关键字的优点，然后再去学习造成困扰的地方

首先看看第一段代码
page 75

//注意只是定义了一个函数，并未调用，这时候函数是没有绑定任何对象function identify() {return this.name.toUpperCase();
}//同上面的函数,但是这个函数内部有点复杂，如果下面的代码看不懂//可以只看上面的函数function speak() {var greeting = "Hello, I'm " + identify.call( this );console.log( greeting );
}var me = { //定义了一个字面量对象
    name: "Kyle"
};var you = {//定义了一个字面量对象
    name: "Reader"
};//通过call方式把函数identify分别绑定到两个对象上//这时的this是指向me对象，和you对象
identify.call( me ); // KYLE  
identify.call( you ); // READER//通过call方式把函数call分别绑定到两个对象上//这时的this是指向me对象，和you对象
speak.call( me ); // Hello, I'm KYLE
speak.call( you ); // Hello, I'm READER

在javascript中定义函数的时候，函数是不属于任何对象的。这一点非常的关键，非常的关键，非常的关键。这是理解this关键字的第一个障碍。

this关键字在js函数定义的时候的不确定性使得js函数使用有极大的灵活性，任何对象都可以使用他。

this到底是什么？

this的绑定和函数定义的位置没有任何关系，只取决于函数调用的方式.
javascript中当一个函数被调用的时候，会创建一个活动记录(有时也称上下文)。这个记录包括函数在哪里被调用，函数的调用方法，传入的参数。this就是记录中的一个属性。

这样在学习javascript关键字的首要问题是要解决怎么知道到函数的调用位置.

js对象绑定规则

每个js函数在调用的时候一定要找到一个对象，绑定以后才能使用。 这里是理解了js函数的定义和调用的区别以后需要掌握的一个规模最庞大的概念，在js中一共有四种绑定方式.就我个人来看，绑定规则并不难，难点还是在js的函数作用域的理解. 尤其是默认绑定.这个绑定方式有极大的迷惑性。

默认绑定

这个是函数的独立调用，也就是在一个函数直接调用的时候，似乎是没有绑定到对象上的，但是根据前面的介绍，js中函数调用时必须要绑定到一个对象上。
看下面代码 page 83

  function foo() { //这是函数的定义位置console.log( this.a );
}  var a = 2;//这个变量定义的含义是什么呢？仅仅是赋值给a吗？

  foo(); // 2  //这是函数的调用位置。为什么会打印出2呢？

很多函数都是这么调用的，照猫画虎也可以写出来，但是理解了具体的含义就不一样了。
foo这个函数定义在全局作用域中(window作用域中)，巧合的是他的调用也是在全局作用域中，注意这仅仅是巧合，巧合。 那么foo()调用的时候为什么会打印出变量 a的值呢？尽管使用了var这个关键字，但是分析作用域可以知道，a这个变量实际是全局变量，说的再明白一点，a实际是window这个全局对象的一个属性，2是这个属性的属性值。
foo()调用的时候是一丝不挂的全裸状态，仅仅是函数本身，没有任何修饰符，这个时候他也没有任何函数包裹，处在全局作用域下面，所以foo()里面的this是指向全局对象的，当要打印this.a的时候，寻找foo()调用位置会找到全局作用域，找全局作用域的属性this.a的时候会打印出2这个属性值。

我们在使用setTimeout,setInterval函数的时候，实际这两个函数就是一丝不挂的，同样绑定在window对象上。

隐式绑定

函数在调用的时候被添加了修饰符。看下面这个代码
page 85

  function foo() { //定义在全局作用下的函数，仅仅是定义，不是调用位置console.log( this.a );
}var obj = { //定义一个对象
    a: 2,foo: foo
};

obj.foo(); // 2  给foo()函数找了一个对象，this就指向这个对象了

这是最常见的方式了，如果不写前面的obj是不是就是上面的默认绑定了？

隐式丢失
经常在js代码的嵌套回调函数中看到在外层函数开始的一句

   var  that=this; //这是什么含义

或许你已经会用了，但是理解了其中意义用起来会更加得心应手啊

看下面段代码.这段代码其实以前我也不太理解，问题还是没有彻底领悟js函数定义和调用之间是没有关系的这一点。
page 86

function foo() { //定义了一个函数console.log( this.a );
}var obj = { //定义了一个对象字面量
    a: 2,foo: foo  //函数作为对对象的属性
};var bar = obj.foo; //把obj对象的函数foo属性赋值给bar变量//这里就是理解这个问题的关键，如果你现在认为调用bar()的时候绑定的对象//是obj那就完全搞错了。这个时候仅仅是把函数foo赋值给了var变量，//并没有把对象也给bar变量，因为这里还不是foo()函数的调用位置，现在//foo函数还没有绑定对象，那么调用bar()的时候对象到底是谁？不知道。//调用的时候才知道。var a = "oops, global"; // 任然是全局对象的属性
bar(); // "oops, global" 这里执行的是默认绑定，this就是去全局对象啦

下面这段代码就是使用var that=this的场景
在使用回调函数的时候要留心。js中函数是一等对象，可以作为另一个函数的参数传入函数。 问题就出在这里了，函数一旦作为实参代替形参的时候，实际也执行了和上面代码一样的赋值过程，实际只是传递了函数本身，原先的对象就没有了。

page 86

function foo() { //定义一个函数console.log( this.a );
}function doFoo(fn) { //fn是形参// 如果函数作为实参传入相当于代码 var fn=obj.foo//和上面一段代码是完全一样的，只是函数本身，并没有绑定任何对象

    fn(); // 在这里调用的时候，由于fn只代表foo()函数，被绑定到全局对象上了
}var obj = {a: 2,foo: foo
};var a = "oops, global"; // `a` also property on global object

doFoo( obj.foo ); // "oops, global"不要被obj.foo迷惑了//没有实际执行函数的调用，此时obj.foo仅仅代表没有绑定任何对象的函数//这个代码块看着眼熟么？这就是javascript中回调函数的样子，当//一个函数作为参数传递进另一个函数的时候,这个参数函数就找不到自己绑定的对象是谁了，//所以就默认绑定到全局对象上了。但是我们既然在一个函数里调用另一个函数，肯定是要用这个函数操作当前的对象，那么既然找不到了，我们就手动给他指定一个对象吧。这就是为什么要使用//var  that=this的原因。我觉得理解这个概念，js的功力至少会增加5%

以上就是javascript中This用法的实例教程的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的javascript中This用法的实例教程全部内容，希望文章能够帮你解决javascript中This用法的实例教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端