对this的解读
来源:互联网 发布:西储大学轴承数据 编辑:程序博客网 时间:2024/05/22 11:42
this
基础了解
this的指向,是在函数被调用的时候确定的。比如下面的例子中,同一个函数由于调用方式的不同,this指向了不一样的对象。
var a = 10; var obj = { a: 20 }; function fn () { console.log(this.a); }; fn(); // 10 fn.call(obj); // 20
此外,在函数执行过程中,this一旦被确定,就不可更改
var a = 10; var obj ={ a:20 } //this已经指定为obj function fn(){ this = obj;//这句话试图修改this,运行后会报错 console.log(this.a); } fn();
一、全局对象中的this
全局环境中的this,指向它本身。
// 通过this绑定到全局对象 this.a2 = 20; // 通过声明绑定到变量对象,但在全局环境中,变量对象就是它自身 var a1 = 10; // 仅仅只有赋值操作,标识符会隐式绑定到全局对象 a3 = 30; // 输出结果会全部符合预期 console.log(a1);//10 console.log(a2);//20 console.log(a3);//30
二、函数中的this
先从下面的例子了解
// demo01 var a = 20; function fn() { console.log(this.a); } fn();//20 // demo02 var a = 20; function fn() { function foo() { console.log(this.a); } foo(); } fn();//20 // demo03 var a = 20; var obj = { a: 10, c: this.a + 20, fn: function () { return this.a; } }; console.log(obj.c);//40 console.log(obj.fn());//10
可以分析出:如果调用者函数,被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。如果该函数独立调用,那么该函数内部的this,则指向undefined.但是在非严格模式中,当this指向undefined时,它会被自动指向全局对象。
从结论中我们可以看出,想要准确确定this指向,找到函数的调用者以及区分他是否是独立调用就变得十分关键。
// 为了能够准确判断,我们在函数内部使用严格模式,因为非严格模式会自动指向全局function fn() { 'use strict'; console.log(this);}fn(); // fn是调用者,独立调用window.fn(); // fn是调用者,被window所拥有
上面的栗子中,fn()作为一个独立的调用者时,它的内部this指向就为undefined.而window,fn()中的fn()被window所拥有,内部的this就指向了window对象。
但在demo03中,对象obj中的c属性使用this.a+20来计算,二它的调用者obj.c并非是一个函数,因此不适用上面的规则,需要单独讨论
当obj在全局声明时,无论obj.c在什么地方调用,这里的this都指向全局对象,而当obj在函数环境中声明时,这个this指向undefined,在非严格模式下,会自动转向全局对象。可运行下面的例子查看区别。
- 实际开发中并不推荐这样使用this
'use strict';var a = 20;function foo () { var a = 1; var obj = { a: 10, c: this.a + 20, fn: function () { return this.a; } } return obj.c;}console.log(foo()); // 运行会报错
下面是容易错误理解的栗子
var a = 20;var foo = { a: 10, getA: function () { return this.a; }}console.log(foo.getA()); // 10//test()独立调用,非严格模式下,自动转向全局windowvar test = foo.getA;console.log(test()); // 20
foo.getA()中,getA是调用者,它不是独立调用,被对象foo所调用,因此它的this指向了foo。而test()作为调用者,尽管他与foo.getA的引用相同,但是它是独立调用的,因此this指向undefined,在非严格模式,自动转向全局window.(和obj一样)
修改后栗子如下
var a = 20;function getA() { return this.a;}var foo = { a: 10, getA: getA}console.log(foo.getA()); // 10
三、使用call,apply显示指定this
js中可以用call和apply自行手动设置this的指向,两个函数都拥有两个方法,除了参数略有不同,其功能完全一样。
第一个参数都是this所要指向的对象
举个栗子:fn并非属于对象obj的方法,但是通过call,我们将fn内部的this绑定为obj,因此就可以使用this.a访问obj的a属性了。这就是call/apply的用法。
function fn() { console.log(this.a);}var obj = { a: 20}//将this绑定为objfn.call(obj);//20
而call与apply后面的参数,都要向将要执行的函数传递参数。其中两个的不同之处是call以一个一个的形式传递,apply以数组的形式传递。
function fn(num1, num2) { console.log(this.a + num1 + num2);}var obj = { a: 20}fn.call(obj, 100, 10); // 130fn.apply(obj, [20, 10]); // 50
call/apply有用处的场景(栗子)
- 将类数组对象转换为数组
function exam(a, b, c, d, e) { // 先看看函数的自带属性 arguments 什么是样子的 console.log(arguments); // 使用call/apply将arguments转换为数组, 返回结果为数组,arguments自身不会改变 var arg = [].slice.call(arguments); console.log(arg);}exam(2, 8, 9, 10, 3);// result: // { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }// [ 2, 8, 9, 10, 3 ]// // 也常常使用该方法将DOM中的nodelist转换为数组// [].slice.call( document.getElementsByTagName('li') );
- 根据自己的需要灵活修改this指向
var foo = { name: 'joker', showName: function() { console.log(this.name); }}var bar = { name: 'rose'}foo.showName.call(bar);
- 实现继承
// 定义父级的构造函数var Person = function(name, age) { this.name = name; this.age = age; this.gender = ['man', 'woman'];}// 定义子类的构造函数var Student = function(name, age, high) { // use call Person.call(this, name, age); this.high = high;}Student.prototype.message = function() { console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');}new Student('xiaom', 12, '150cm').message();// result// ----------// name:xiaom, age:12, high:150cm, gender:man;
在面向对象中,在Student的构造函数中,借助call方法,将父级的构造函数执行了一次,相当于将Person中的代码,在Sudent中复制了一份,其中的this指向为从Student中new出来的实例对象。call方法保证了this的指向正确,因此就相当于实现了基层。Student的构造函数等同于下。
var Student = function(name, age, high) { this.name = name; this.age = age; this.gender = ['man', 'woman']; // Person.call(this, name, age); 这一句话,相当于上面三句话,因此实现了继承 this.high = high;}
- 在向其他执行上下文的传递中,确保this的指向保持不变
如下面的例子中,我们期待的是getA被obj调用时,this指向obj,但是由于匿名函数的存在导致了this指向的丢失,在这个匿名函数中this指向了全局,因此我们需要想一些办法找回正确的this指向。
var obj = { a: 20, getA: function() { setTimeout(function() { console.log(this.a) }, 1000) }}obj.getA();
常规的解决办法很简单,就是使用一个变量,将this的引用保存起来。我们常常会用到这方法,但是我们也要借助上面讲到过的知识,来判断this是否在传递中被修改了,如果没有被修改,就没有必要这样使用了。
var obj = { a: 20, getA: function() { var self = this; setTimeout(function() { console.log(self.a) }, 1000) }}
当然,也可以使用ES5中已经自带的bind方法。它与我上面封装的bind方法是一样的效果。
var obj = { a: 20, getA: function() { setTimeout(function() { console.log(this.a) }.bind(this), 1000) }}
四、构造函数与原型方法上的this
在封装对象的时候,我们几乎都会用到this,但是,只有少数人搞明白了在这个过程中的this指向,就算我们理解了原型,也不一定理解了this。所以这一部分,我认为将会为这篇文章最重要最核心的部分。理解了这里,将会对你学习JS面向对象产生巨大的帮助。
结合下面的例子,我在例子抛出几个问题大家思考一下。
function Person(name, age) { // 这里的this指向了谁? this.name = name; this.age = age; }Person.prototype.getName = function() { // 这里的this又指向了谁? return this.name;}// 上面的2个this,是同一个吗,他们是否指向了原型对象?var p1 = new Person('Nick', 20);p1.getName();
我们已经知道,this,是在函数调用过程中确定,因此,搞明白new的过程中到底发生了什么就变得十分重要。
通过new操作符调用构造函数,会经历以下4个阶段。
创建一个新的对象;
将构造函数的this指向这个新对象;
指向构造函数的代码,为这个对象添加属性,方法等;
返回新对象。
因此,当new操作符调用构造函数时,this其实指向的是这个新创建的对象,最后又将新的对象返回出来,被实例对象p1接收。因此,我们可以说,这个时候,构造函数的this,指向了新的实例对象,p1。
而原型方法上的this就好理解多了,根据上边对函数中this的定义,p1.getName()中的getName为调用者,他被p1所拥有,因此getName中的this,也是指向了p1。
- 对this的解读
- 对this的解读
- 对lrucache的解读
- 详细解读JavaScript的this关键字
- 对薪水的另类解读
- 对人民币升值的解读
- 对遗传算法的解读
- 对ThreadLocal的源码解读
- 对javascript的this理解
- 我对this的看法
- JavaScript 对this的理解
- javascript对this的理解
- 对this 的深入理解
- 浅谈对this的理解
- 对this关键字的理解
- JS this全方位解读
- 解读JavaScript之this
- 解读FriendFeed对MySQL的使用
- BZOJ:2440: [中山市选2011]完全平方数(容斥原理)
- jQuery中应该注意的细节
- TinkPHP 自定义API基控制器类
- Ubuntu桌面右键不管用解决办法
- 去重函数
- 对this的解读
- 水果 HDU
- 网页计算器
- 7.23 练习题 A: 丑数
- PHP面向对象特性-封装
- 文章标题
- 从零单排_JAVA 青铜5(背景知识,UML图,基本数据类型)
- .NET入门知识
- Maximum Average Subarray I问题及解法