《Web前端开发修炼之道》笔记五:高质量JavaScript(二)
2016-02-04 15:22
525 查看
1.this关键字的指向
(这部分转自http://blog.csdn.net/kkdelta/article/details/8457358)JavaScript中的this关键字是一个难以琢磨的概念,是一个依赖于它的执行环境而被解析的关键字。简单说就是谁调用这个方法,方法里的this就是谁.
1,在JS文件中直接alert(this);this代表的是window,当前的执行环境是在JS的顶层域里面。
2,下面这个例子中this指向的是调用该方法的对象,button标签。
[html] view
plain copy
<script type="text/javascript">
function test() {
alert(this.value);
this.style.color = "red";
}
</script>
</head>
<body>
<input type="button" id="ipt" value="test this">
<script type="text/javascript">
document.getElementById("ipt").onclick = test;
</script>
</body>
</html>
上面的例子等价于下面的例子,document.getElementById("ipt").onclick相对于把test函数变成了id为 ipt元素的一个函数属性了,从而让this指向了id为 ipt元素。但是如果写成<input type="button" id="ipt" onclick="test()" value="test this">这样的方式调用test方法,this却是指向了window。[html] view
plain copy
<script type="text/javascript">
function test() {
alert(this.value);
this.style.color = "red";
}
</script>
</head>
<body>
<input type="button" id="ipt" value="test this">
<script type="text/javascript">
var button = document.getElementById("ipt");
test.call(button);
</script>
</body>
</html>
3,在一个函数中,this代表这个函数的执行环境
[javascript] view
plain copy
function Test(){
alert(this);
}
Test();//outputs window
var obj = new Test(); // outputs object
Test()是在window域里执行的,其等价于window.Test();
var obj = new Test(); 其相当于 obj.Test();
2.利用map传参
比如一个函数,参数有很多,可能会有如下情况:所以可以把需要的参数包在一个map中传入,比如:
3.面向对象
1.类定义
1)构造函数
2)原型
在声明一个类时,同时生成了一个对应的原型,例如Animal.prototype可以指向Animal类的原型,原型可以通过constructor指向Animal类的构造函数。3)关系
1.当new Animal()时,返回的Animal实例会结合构造函数中的定义的属性、行为以及原型中定义的行为,如果有同名的,构造函数中的优先级更高。2.一般来说,习惯把属性放在构造函数中,方便接受参数。
3.this在构造函数和原型中都指向实例对象,通过这个关键字可以让构造函数和原型实现通信。
2.公有和私有
构造函数中var的私有属性在原型中不能被访问到。
把所有的属性和行为都写在构造函数中的确是最方便的做法,但并不推荐这么做,因为内存中的原型只有一个,写在原型中的行为被所有实例共享,写在类里的行为会被每个实例复制一份。
更常见的做法:
通过命名约定来模拟私有属性:在私有属性前加上 _ ,如:this._age=20。
另外可以通过set和get方法来对属性的值进行一些约束,对值的变动进行监听。
3.继承
Bird.prototype=new Animal()使得Bird.prototype.constructor指向了Animal,所以要用Bird.prototype.constructor=Bird将它重新指回Bird。
可以进一步封装为extend函数:
4.一些别的
1.通过node.XXX的方式获取HTML标签的属性值,跨浏览器兼容性比node.getAttribute("XXX")好。但是对于自定义属性,在Firefox下,只能使用node.getAttribute("XXX")的方法。所以推荐:对于常规属性,使用前者;对于自定义属性,使用后者。2.js改变dom节点样式的三种方式
1)如node.style.color
2)node.className=""
3)通过js增加<style></style>标签,在内部修改
相关文章推荐
- javascript使用正则表达式
- Yii2 如何更好的在页面注入JavaScript
- 动态加载js文件的jsLoader代码
- json 转数组
- js Array.every some 方法
- HDOJ 2112 HDU Today (Dijstra 此题略坑)
- JavaScript
- (转载)jsp与servlet之间页面跳转及参数传递实例
- javascript一些小例子总结,持续更新...
- 返回Json数据中带有<pre></pre>标签解决方法
- C# - JSON详解
- 外部js书写规则
- javascript脚本从载入浏览器到显示执行的过程解析
- javascript中函数声明、变量声明以及变量赋值之间的关系与影响
- HDOJ 1874 畅通工程续 (Dijstra + 重边判断)
- Validation of Chinese ID Numbers using JavaScript
- JS中找不到控件-已解决
- js推断指定函数、变量是否存在的方法
- JS将字符串首字母变为大写,其余为小写
- js词法分析