《JavaScript设计模式与开发》笔记 2.this指针
Posted SmarTom
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《JavaScript设计模式与开发》笔记 2.this指针相关的知识,希望对你有一定的参考价值。
- 1.作为对象方法调用
- 2.作为普通函数调用
- 1.作为普通函数进行调用
- 2.将函数赋值给一个对象
- 3.callback内部的this指向了window
- 4.解决callback内部的this问题
- 3.构造器调用
- 1.普通构造器
- 2.如果构造器显示地返回了一个object类型对象
- 4.Function.prototype.call 或 Fucktion.prototype.apply调用
- 1.跟普通的函数调用相比,可以动态的传入函数的this
1.作为对象方法调用
var obj = { a:1, getA:function(){ console.log(this===obj); console.log(this.a); } } obj.getA();
2.作为普通函数调用
//作为普通函数进行调用 var name = ‘SmarTom‘; var getName = function(){ return this.name; } console.log(getName());//返回undefined /*-------------------------------------------------------*/ //将函数赋值 var obj ={ name : ‘SmarTom‘, getName : function(){ return this.name; } } /*将函数赋值给一个对象 相当于 var getname=function(){ asdfasdf } */ var getname = obj.getName; console.log(getname()); //返回undefined /*===============请忽视分割线=============================*/ var obj ={ name : ‘SmarTom‘, getName : function(){ return this.name; } } console.log(obj.getName()); //返回SmarTom /*===============我知道你不会当做不知道====================*/
有时候我们会遇到一个困扰,比如在div节点事件函数内部,有一个局部的callback方法,callback方法被作为普通函数来调用时,callback内部的this指向了window,但我们往往认为他是指向该div的节点
,如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1">我是一个div</div> <script> document.getElementById(‘div1‘).onclick = function(){ alert(this.id); //作为对象调用div1 var callback =function(){ alert(this.id); } callback(); //调用的是全局的this 弹出 undefined } </script> </body> </html>
解决方法:
1.将this赋值给临时变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1">我是一个div</div> <script> document.getElementById(‘div1‘).onclick = function(){ var that = this; alert(that.id); //作为对象调用div1 var callback =function(){ alert(that.id); } callback(); //调用的是全局的this 弹出 undefined } </script> </body> </html>
2.使用严格模式 "use strict" 注意使用的时候会忽略this=undefined 的情况
3.构造器调用
javascript中没有类,但是可以从构造器中创建对象,同时也提供了new运算符,使得构造器更像一个类。其实就是用new构造一个对象,看起来更像是类
通常情况下,构造器里的this就指向返回的这个对象
var myClass = function(){ this.name = ‘SmarTom‘; } var obj = new myClass(); console.log(obj.name); //返回SmarTom
但使用new调用构造器时,还要注意一个问题,如果构造器显示地返回了一个object类型对象,那么此次运算结果最终会返回这个对象,可不是我们之前期待的this;
var myClass = function(){ this.name = ‘SmarTom‘; return { name : "Bob Dylan" } } var obj = new myClass(); console.log(obj.name); //返回Bob Dylan
4.Function.prototype.call 和 Function.prototype.apply调用
跟普通的函数调用相比,可以动态的传入函数的this
var obj1 = { name : "SmarTom", getName : function(){ return this.name; } }; var obj2 = { name :"Bob Dylan" }; console.log(obj1.getName()); //输出‘SmarTom‘ console.log(obj1.getName.call(obj2)); //输出BobDylan
以上是关于《JavaScript设计模式与开发》笔记 2.this指针的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript设计模式与开发实践---读书笔记 迭代器模式