未加星标

javascript的this简单记忆

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

一直感觉 javascript 中的 this 是一个大坑,虽然一直都有注意,一直都有研究,但是总是会忘记。在这里,总结一下一些简单的规律

不考虑箭头函数的情况下

下面的所有的都是不考虑箭头函数的情况下,因为箭头函数和普通的差别很大

直接调用的都是window

除非是 bind 绑定过的 ,其他情况下,直接调用的方法的 this 都是 window 。所谓的直接调用,就是直接以 method() 的形式调用,没有 call , apply , new

看几种情况:

function foo(){ return this; } foo(); // window var obj = { foo: function(){ return this; } } var foo = obj.foo; foo(); // window function Foo(){ this.foo = function(){ console.log(this); } var foo = this.foo; foo(); // window } new Foo(); 谁调用,谁是this

除非是 bind 绑定过的 ,一般情况下,谁调用这个方法,那么内部的 this 就指向这个对象。也就是说 obj.method() ,那么就指向 obj 。 obj.foo.method() ,那么就指向 obj.foo

看几个例子:

var obj = { foo: function(){ return this; } } obj.foo(); // obj调用,所以结果是obj function foo(){ return this }; var obj = {}; obj.foo = foo; obj.foo(); // obj调用,所以结果是obj var obj = { bar: function(){ return this; }, foo: function(){ return this.bar(); } } obj.foo(); // 在foo中, this是obj, 而this调用的bar, 所以返回的是obj var obj = { bar: { foo: function(){ return this } } } obj.bar.foo(); // obj.bar调用的foo,所以返回的结果是bar function foo(){ this.bar = function(){ return this } return this.bar(); } foo(); // 由于foo中的this是window, 所以this.bar()返回的是window function Foo(){ this.foo = function(){ console.log(this); } this.foo(); } var object = new Foo(); // 由于this.foo中的this是object,所以this是object new会生成一个新的this

所有情况下,(箭头函数不能使用 new 关键字),使用了 new 以后,会把内部的 this 指向新生成的对象。

除去bind的情况下, prototype 中的 this 也指向新生成的对象

function Foo(){ console.log(this); // this指向新生成的对象,object } var object = new Foo(); function Foo(){ this.foo = function(){ return this === object; } } var object = new Foo(); object.foo(); // 输出true function Foo(){} Foo.prototype.foo = function(){ return this === object; } var object = new Foo(); object.foo(); // 输出true call, apply是谁,this就是谁

除非是bind的情况, call , apply 是谁,那么内部的 this 就是谁。

注意:如果是基本类型,那么 javascript 会把基本类型转换成 Object 的形式

也是看例子:

function foo(){ return this; } foo.call("a"); // String typeof foo.call("a"); // object var obj = { foo : function(){ return this; } } obj.foo.call(1); // Number typeof obj.foo.call(1); // object function Foo(){ this.foo = function(){ return this; } } var object = new Foo(); object.foo.call(1); // Number bind是谁,this就是谁

除了 new 这一种特殊情况 , bind 的对象是谁,那么 this 也就是谁。即使 call , apply 也没有权利改变。

注意:如果是基本类型,那么 javascript 会把基本类型转换成 Object 的形式

function foo() { return this; } foo = foo.bind(1); foo(); // Number typeof foo(); // object function foo() { return this; } foo = foo.bind(1); foo.call("a"); // Number 1 function Foo() { return this; } Foo.prototype.foo = (function(){ return this; }).bind(1); var object = new Foo(); object.foo(); // Number

特殊情况

new 这个关键词可以改变方法内部的 this ,使他指向新生成的对象

function Foo(){ this.foo = function(){ console.log(this === obj) } } Foo = Foo.bind(1); var obj = new Foo(); obj.foo(); // 输入true 箭头函数

箭头函数的 this 是根据定义环境的 this 来定的,也就是说定义的函数周围的 this 是什么,它的 this 就是什么。

而且不会被 bind , call , apply 所改变

var foo = ()=>{ return this }; foo() // window var obj = { foo: ()=>this } obj.foo(); // 由于定义的时候,周围的环境是window,所以返回window var obj = { foo(){ var bar= ()=>{ return this }; return bar(); } } obj.foo(); // 由于定义bar的时候,周围环境是obj,所以返回obj var foo = obj.foo; foo(); // 同理,这里是window var foo = ()=>{ return this }; foo = foo.bind(1); foo(); // window foo.call(1); // window foo.apply(1); // window function Foo(){ // 箭头函数 var a = ()=>{ console.log(this === object); // true } // 对比普通函数 var b = function(){ console.log(this === window); // true } this.foo = function(){ a(); b(); } } var object = new Foo(); object.foo(); function Foo(){} // window Foo.prototype.foo = ()=>{ return this } // window var object = new Foo(); object.foo(); // 由于定义foo的时候,周围环境是window,所以这里是window

由于只是我根据经验和资料自己总结的,所以不知道是否有疏忽或者遗漏,如果有问题的地方,欢迎提出。谢谢

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:javascript的this简单记忆
本站链接:http://www.codesec.net/view/534821.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(46)