首页 > web前端 > js教程 > javascript中This用法的实例教程

javascript中This用法的实例教程

零下一度
发布: 2017-06-25 09:38:12
原创
1505 人浏览过

《你不知道的javascript》这本书读了有好几遍了,似乎每一次读都有新发现,有些内容并不是一下子可以弄懂的,每次读似乎都能明白一些概念。
再重读一下this关键字。这个概念非常灵活,也非常难掌握,所以我觉得经常读读没有坏处。期待javascript一桶江湖,这样学习的成本就低啦!
参考本书的第二部分的第一章,第二章。

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用法的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板