js的oop方式和this指针问题

js的oop其实很简单，function本身就充当了类和构造函数的角色。然后通过传给构造函数的参数，完成类属性的赋值，从而实际化不同的对象。

可是，js的oop也有很让人头疼的地方，其中之一就是this的指向。在js中，普通的函数，this指向的是window对象，因为所有的全局函数都是window对象的方法。而对于类和对象中的方法，this指向的是这个类和对象。可是，this指针并不是那么老实的，如果在一个类中的方法，调用了另一个类的方法，那么这个this的指向就变得很奇怪了。举个简单的例子。

var a = 0;
function test()

{

this.a=123;

this.b = function()

{

alert(this.a);

}

this.init = function()

{

alert(this.a);
setTimeout(this.b,1000);

}

this.init();

}

var adang = new test();

你猜结果会是什么？一开始弹出一个123,然后一秒后又弹出一个123??错！一开始的确是弹出123,一秒后弹出的却是0!因为setTimeout是window对象的方法，所以做为参数被传入setTimeout方法的this.b()函数，运行的闭包空间，对象是window，而不再是test类，this指针指向了window，也就是说，里面的alert(this.a)等于window.a,而不是test.a。

这的确有点让人费解。想来想去，想到的一个解释是这样的：因为js中对复杂数据类型是通过传址方式进行赋值的，所以setTimeout中的第一个参数，也就是要运行的函数，是传递的this.b()这个方法的地址给setTimeout方法使用的，这个地址保存的是this.b方法中的所有"字符"，是个string!!!然后再在setTimeout内部用eval(str)来运行。这么一来，this关键字完全没有连到test类的地址，而是直接使用新闭包的对象。

这个问题应该怎么解决呢？？如果我想在setTimeout里正确运行test类的b方法，正解调用test的属性，应该怎么做呢？方法很简单，去掉this,把a由this.a换成var a，让它从一个公开属性，变成私有属性，因为a定义在test内部的最外一级，所以它的作用域是整个test类，类里的b方法可以调用到它。而它又去掉了this关键字，不会错误地指到别的对象上。

总结一下，心得就是，在用oop方式写js的时候，少用this关键字，除了必要的方法和属性写成公开属性/方法，应该尽量用var 定义成私有属性/方法。

转载于:https://www.cnblogs.com/cly84920/archive/2008/07/12/4427145.html

js的oop方式和this指针问题相关推荐

11月8日学习内容整理：js的引入方式，变量数据类型，运算符，流程控制，函数...
js是一门成熟的编程语言,专门用浏览器客户端执行的语言一.js的引入方式 1.直接在body标签中使用script标签写js语言 2.通过script标签导入js文件,<script sr ...
前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
好程序员 web 前端教程之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...
js文件引用方式及其同步执行与异步执行
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp74 任何以appendChild(scriptNode) 的方式引入的j ...
js post方式请求另外一个php,利用JS使用POST方式提交请求的方法（结合代码详细解答）...
下面是我给大家整理的利用JS使用POST方式提交请求的方法,有兴趣的同学可以去看看. 一般都是写上隐藏的form标签,用来调用js函数然后submit 全部用js来写也行,以下是我在一个问答频道看见别 ...
web程序前后台功能实现_好程序员web前端教程之JS继承实现方式解析
好程序员web前端教程之JS继承实现方式解析,JS是Web前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应JS学习不易,各类知识点概念及应用常常让人抓耳挠腮.在接下来的北京Web ...
java 获取js元素,表单元素值获取方式js及java方式的简单实例
表单元素值获取方式js及java方式的简单实例这里有新鲜出炉的 Javascript 教程,程序狗速度看过来! JavaScript 客户端脚本语言 Javascript 是一种由 Netscape ...
调试技巧：如何以数组的方式查看一个指针
对于下面两个变量: int *p = new int[10]; int q[10]; 在watch窗口中查看有不同的效果,查看p的时候可以看到一个地址,展开+号只能看p[0]的值:查看q的时候也可以看 ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
javaScript基础面试题 -- 延迟加载JS有哪些方式？
延迟加载JS有哪些方式? js脚本放置在不同位置,对页面加载的不同影响 defer与async的区别: 回答:defer 与 async js脚本放置在不同位置,对页面加载的不同影响关于这个问题,首 ...

js的oop方式和this指针问题

js的oop方式和this指针问题相关推荐

最新文章

热门文章