JavaScript学习总结——this对象
2016-07-21 14:44
501 查看
在JavaScript中,this关键字是动态绑定的,或称为运行期绑定,这极大地增强的我们程序的灵活性,同时也给初学者带来了很多困惑。本文总结了this的几个使用场景和常见误区。
在全局环境中使用
当作为普通函数被调用时,函数内部的的
当作为对象内部的方法被调用时,这里
JavaScript 中的构造函数很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,
我们首先来看这样一个栗子:
是不是和上面说的
这属于 JavaScript 的设计缺陷,正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上,为了规避这一缺陷,我们可以使用变量替代的方法,约定俗成,该变量一般被命名为 that。 在这个栗子中,这样我们创建了一个局部变量
当我们把一个对象的方法赋值给一个变量时,它的
从上面这个栗子中我们可以看到,当把对象
源引:https://segmentfault.com/a/1190000004938787
全局环境
在全局环境中使用this,它会指向全局对象。在web游览器中,也就是window对象。
alert(this === window); // true
函数调用
当作为普通函数被调用时,函数内部的的this也会指向全局对象。
var name = "window"; function sayName(){ var name = "fun"; alert(this.name); } sayName(); // "window"
作为对象的方法调用
当作为对象内部的方法被调用时,这里this指向这个方法所在的对象。
var name = "window"; var obj = { name: "obj", sayName: function(){ alert(this.name); } }; obj.sayName(); // "obj"
作为构造函数调用
JavaScript 中的构造函数很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this绑定到新创建的对象上。
function Person(name){ this.name = name, this.sayName = function(){ alert(this.name); } } var person1 = new Person("daoko"); person1.sayName(); // "darko"
apply和call调用
apply和
call是函数对象的的两个方法,它们可以修改函数执行的上下文环境,即
this绑定的对象。
apply和
call的第一个参数就是this绑定的对象,若
apply和
call的参数为空,则默认调用全局对象。
var name = "window" var obj = { name: "object" } function sayName(){ alert(this.name); } sayName(); // 直接调用函数sayName sayName.call(obj); // 用call方法修改this的指向 sayName.call(); // 当call方法的参数为空时,默认调用全局对象
特殊情况
常见错误
我们首先来看这样一个栗子:var name = "window"; var obj = { name: "obj", sayName: function(){ var test = function(){ alert(this.name); // this绑定到全局对象上 } test(); } } obj.sayName(); // "window"
是不是和上面说的
作为对象的方法调用情况很像,按照我们的理解此时的
this应该指向
obj对象,但是实际情况不是这样的,此时的
this指向全局对象。
这属于 JavaScript 的设计缺陷,正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上,为了规避这一缺陷,我们可以使用变量替代的方法,约定俗成,该变量一般被命名为 that。 在这个栗子中,这样我们创建了一个局部变量
that来指向
obj对象。
var name = "window"; var obj = { name: "obj", sayName: function(){ var that = this; // that指向对象obj var test = function(){ alert(that.name); } test(); } } obj.sayName(); // "obj"
方法的赋值表达式
当我们把一个对象的方法赋值给一个变量时,它的this会发生什么变化呢? 看个栗子:
var name = "window"; var obj = { name: "obj", sayName: function(){ alert(this.name); } } var test = obj.sayName; obj.sayName(); // "obj" test(); // "window"
从上面这个栗子中我们可以看到,当把对象
obj的方法赋值给一个新的变量
test时,它的this指向发生了变化,
test就向一个普通的函数一样被调用,此时指向全局对象。
源引:https://segmentfault.com/a/1190000004938787
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解