JavaScript 原型链与类型判断核心易错点解析

本文汇总了 JavaScript 开发中常见的易错知识点，旨在为读者提供参考与学习素材。

为什么 typeof null === 'object'

其底层原理在于：不同类型的对象在计算机底层均以二进制形式存储。若二进制的前三位均为 0，JavaScript 引擎会将其判定为 object 类型。由于 null 的二进制表示全为 0，前三位自然也是 0，因此执行 typeof 操作时返回字符串“object”。

对象属性的存在性

例如访问 myObject.a 时，返回值可能是 undefined。但这存在两种情况：一是属性确实存在但值为 undefined，二是属性根本不存在而返回 undefined。区分这两种情况至关重要。

var myObject = {
  a:2
};

// 方案一
("a" in myObject); // true
("b" in myObject); // false

// 方案二
myObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false

// 方案三
Object.prototype.hasOwnProperty.call(myObject, 'b')

对象继承的三种方法

具体实现可参考以下代码示例：

		function Foo(name) {
			this.name = name;
		}

		Foo.prototype.myName = function() {
			console.log(this.name)
		}

		function Bar(name, label) {
			Foo.call(this, name);
			this.label = label;
		}
        
        // 方法1
		Bar.prototype = Object.create(Foo.prototype)
        
        // 方法2
		Bar.prototype = Foo.prototype;

        // 方法3
        Bar.prototype = new Foo();

		//Bar.prototype.constructor = Bar;

		Bar.prototype.sayName = function() {
			console.log(this.name)
		}

		
		var b = new Foo('fayin')
	
		b.sayName()

上述示例展示了三种使 Bar 继承 Foo.prototype 上方法的方式，但它们之间存在细微且关键的差异：

Object.create(..) 会创建一个全新的“空”对象，并将该新对象内部的 [[Prototype]] 属性关联到指定的对象（本例中为 Foo.prototype）。

Bar.prototype = Foo.prototype 并不会创建新对象，而是让 Bar.prototype 直接引用 Foo.prototype。因此，若执行类似 Bar.prototype.myLabel = ... 的赋值操作，实际上会直接修改 Foo.prototype 本身。

Bar.prototype = new Foo() 确实会创建一个关联到 Bar.prototype 的新对象。但它调用了 Foo(..) 构造函数，若 Foo 函数包含副作用（如写日志、修改状态、注册到其他对象或给 this 添加数据属性等），这些副作用将直接影响 Bar() 的“后代”，可能引发不可预知的后果。

结论

因此，要创建合适的关联对象，应优先使用 Object.create(..) 而非带有副作用的 Foo(..)。这种做法的唯一缺点是需要创建一个新对象并丢弃旧对象，无法直接修改现有的默认对象。

感兴趣的朋友可以使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《JavaScript 错误与调试技巧总结》、《JavaScript 传值操作技巧总结》、《javascript 编码操作技巧总结》、《JavaScript 中 json 操作技巧总结》、《JavaScript 切换特效与技巧总结》、《JavaScript 查找算法技巧总结》、《JavaScript 动画特效与技巧汇总》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》

希望本文所述的知识点对大家学习 JavaScript 程序设计有所帮助。