当前位置: 首页 > 编程笔记 >

Javascript中this关键字的一些小知识

宰父学
2023-03-14
本文向大家介绍Javascript中this关键字的一些小知识,包括了Javascript中this关键字的一些小知识的使用技巧和注意事项,需要的朋友参考一下

Javascript应该是现在最流行的跨平台语言之一,一直在玩前端的一些有意思的东西,发现竟然没有掌握好这门语言。有点舍本逐末,于是想趁着现在这有空的时候好好补充一点遗漏的东西。

this的隐性绑定

一开始这是我很迷惑的东西,刚开始看到的时候,不理解。而后,在相似的情况下,又能用类似的方法解决同样的问题。便试着理清这其中的知识,方便于查找。

这是一个Javascript语言上设计的错误,但是似乎这个错误是不可避免的,函数是对象,数组是对象等等。引用《Javascript: The Good Parts》中的例子


function add (a,b) {return a+b}

 var sum = add (3,4);

 console.log(sum); //sum = 7

此时sum的结果是7。


 > typeof add

 > 'number'


在这里可以看到,add的类型是数值。

以此模式调用函数时,this被绑定到全局变量。
也就是在现在的环境下,我们可以这样调用this


 this.add(3,4)


这就是this的隐性绑定,而this会以不同的方式被绑定。

var hello = function (){

    return "Hello, " + this.name;

};

name = 'this';

console.log(hello());


这时我们就会得到Hello,this。而当

var hello = function (){

    return "Hello, " + this.name;

};

var user = {

    hello : hello,

    name : 'phodal',

}; console.log(user.hello());


这时user中的hello便指向了hello函数,而这在我们的理解中,这怎么可能,所以是个Bug。

如果我们在这个方法中定义一个变量并给它赋值this,那么内部函数就可以通过那个变量访问到this。

var that = this

于是当情况稍微复杂一点的时候我们就需要用到:


 vat that = this;


tips:

1.this变量的作用域总是由其最近的封闭函数所确定。
2.使用一个局部变量(如me,self,that)让this绑定对于内部是可用的。

一个简单的例子:


var M = function(){

    this.name = "M";

};

var MM = function(){     z = new M();     this.name = "MM";

    z.printName = function(){         console.log(this.name);     };     return z.printName(); };

var mm = new MM;


这时的this指向的是M函数,而由MM自身。如果我们将M中的this去掉,那么返回的就是一个undefined。 于是我们就创建一个当前this作用域的别名,如that或者self等等:

var MM = function(){

    z = new M();

    this.name = "MM";

    var self = this;

    z.printName = function(){

        console.log(self.name);

    };

    return z.printName();

};

这样就能返回一个MM了。除此之外,在ES5中可以用回调函数的bind方法。


var MM = function(){

    z = new M();

    this.name = "MM";

    z.printName = function(){

        console.log(this.name);

    }.bind(this);

    return z.printName();

};


bind可以将方法绑定到接收者。

其他

又一个hello,world

在一次偶然的机会中遇到print('Hello')('World'),然后输出了'Hello, World'。

所谓的高阶函数,看上去似乎很有用,有兴趣可以看看下一篇。

 类似资料:
  • 本文向大家介绍图解JavaScript中的this关键字,包括了图解JavaScript中的this关键字的使用技巧和注意事项,需要的朋友参考一下 JavaScript 是一种脚本语言,支持函数式编程、闭包、基于原型的继承等高级功能。JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思。其中JavaScript 中

  • 本文向大家介绍JavaScript知识点总结(十)之this关键字,包括了JavaScript知识点总结(十)之this关键字的使用技巧和注意事项,需要的朋友参考一下 this是Javascript语言的一个关键字。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。JavaScript中的this指针是一个动态的变量,一个方法内的this

  • 本文向大家介绍javascript中this关键字详解,包括了javascript中this关键字详解的使用技巧和注意事项,需要的朋友参考一下 不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法。强烈推荐。 以下篇幅有点长,希望读者耐心阅读。 以下内容会分为如下部分: 1.涵义   1.1:this涵义   1.2:this指向的可变性 2.使用

  • 本文向大家介绍javascript的this关键字详解,包括了javascript的this关键字详解的使用技巧和注意事项,需要的朋友参考一下 this 的定义 表示当前执行代码的环境对象  因此可将 this 的剖析分为“全局环境” 和 “函数环境” 两种类型的环境对象 全局环境 函数环境 在函数内部,this 的取值取决于函数被调用时的运行环境。 这里涉及到内存里的数据结构相关的知识点,当我们

  • 本文向大家介绍Javascript this 关键字 详解,包括了Javascript this 关键字 详解的使用技巧和注意事项,需要的朋友参考一下 一、this指向构造函数实例化对象 在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,如下例: 当构造函数当做普通函数被调用时,并没有返回值,同时this指向全局对象。那么我们如何来避免因为缺少new关键字,而产生的问题呢? 在上

  • 本文向大家介绍JavaScript中的this关键字使用详解,包括了JavaScript中的this关键字使用详解的使用技巧和注意事项,需要的朋友参考一下  和其它许多面向对象的语言一样,JavaScript 中也有 this 关键字,this 在函数中用来指向调用此方法的对象。实际编程中要判断 this 到底指向谁,一般可遵循以下原则:     如果该函数被 Function.call 或者 F