JavaScript 基础笔记：DOM显示、作用域与面向对象核心概念

DOM元素显示与隐藏机制

关于元素显示与隐藏的机制

在性能方面，修改 visibility 属性通常比修改 display 属性更快。

实现图像的闪烁效果主要有两种方法：利用 CSS 的 visibility 属性，或者

利用 display 属性。对于采用绝对定位的元素，这两种属性产生的视觉效果基本一致。

关键区别在于：设置为 display:none 的元素会完全脱离文档流，不再占用空间；而设置为 visibility:hidden 的元素虽然不可见，但仍保留其在文档流中的原始位置。

JavaScript实用经验与技巧

一些实用经验总结

第一，JavaScript 变量不存在块级作用域。在判断语句或循环中定义的变量，其作用域实际上覆盖整个函数体。

第二，split() 方法的参数接受正则表达式字符串。若使用正则特殊字符作为分隔符，必须进行转义处理。

隐藏浏览器中鼠标悬停图片时弹出的工具栏

可以在图片标签中添加属性：

或者在

标签内添加以下元数据：

<meta http-equiv="imagetoolbar" content="no">

</head>

其他实用技巧

第一，使用 # 作为链接地址时，页面不会自动滚动到顶部。

可以通过以下代码阻止默认行为：

第二，关闭窗口时不弹出确认提示。

执行以下代码：

window.close();

面向对象编程核心概念

JavaScript 面向对象编程要点总结

第一，静态属性无法通过实例访问，同样，实例属性也无法通过构造函数直接访问。

示例代码如下：

myfun.b="b";

alert(new myfun().a);//输出a

alert(myfun.a);//输出undefined

alert(myfun.b);//输出b

alert(new myfun().b);//输出undefined

第二，通过 prototype 添加属性。

添加到 prototype 的属性将成为所有由该构造函数创建的实例共享的通用属性。

示例构造函数定义：

this.name=name;

this.color=color;

Fish.prototype.livesIn="water";

Fish.prototype.price=20;

如上例所示，每个实例化的鱼对象可以拥有不同的 name 和 color 属性，但它们共享 livesIn 和 price 属性，即都生活在“water”中且价格为 20。

这是因为对象创建时，构造函数会将 prototype 对象的引用赋值给新对象的内部属性 __proto__。对象在查找属性时，会沿着这个 __proto__ 链进行查找。

第三，通过 prototype 为对象添加方法。

利用 prototype 可以为所有实例添加共用方法。其优势在于：无需在每次构造对象时重新创建和初始化该函数，从而节省内存。

第四，每个函数都拥有一个静态的 name 属性（内置类同样拥有此静态 name 属性），该属性不可被覆盖。

示例定义：

var b=new Function();

alert(b.name);//输出anonymous

alert(a.name);//输出a

alert(Array.name);//输出Array

this关键字指向解析

关于 this 关键字的解析

此处讨论 this 是因为它在 JavaScript 中的行为与 C++ 或 Java 中的 this 不完全相同。

在 JS 中，this 指向紧贴调用位置、且非通过 prototype 扩展的方法所属的对象。

例如前述示例中：

MyObj.prototype.sayBye = function () {

alert(”Bye” + this.name);

此处的 this 指向非 prototype 扩展的函数 MyObj（注意 JS 中类由函数实现），因此 this.name 访问的是实例变量。

但在以下情况中：

MyObj.prototype.doSomething = function () {

todo(function () {

alert(this.name);

此时，this 指向内部的匿名函数。

即：

function () {

若直接这样使用会导致错误，需借助辅助变量解决。

修正后的代码：

var me = this; //将当前实例引用赋值给变量me

todo (function () {

alert(me.name); //通过me访问myObj实例