javascript instanceof 内部机制探析_javascript技巧

比如:

复制代码 代码如下:

// 代码 1
function Pig() {}
var pig = new Pig();
alert(pig instanceof Pig); // => true

function FlyPig() {}
FlyPig.prototype = new Pig();
var flyPig = new FlyPig();
alert(flyPig instanceof Pig); // => true

来看另一段代码:

复制代码 代码如下:

// 代码 2
function Pig() { Pig.prototype = {/* some code */} }
var pig = new Pig();
alert(pig instanceof Pig); // => false

为何上面的猪 pig 不再是猪 Pig 了呢?
当一个对象是某个类的实例时,意味着这个对象具有该类的方法和属性。在 JavaScript 中,一个猪类的特性体现在原型中:

复制代码 代码如下:

// 代码 3
function Pig() {}
Pig.prototype = {
"吃猪食": function() {},
"睡觉": function() {},
"长膘": function() {}
};
var pig = new Pig();
alert(pig instanceof Pig); //=> true

如果动态改变了猪的特性,让猪变成了牛:

复制代码 代码如下:

// 代码 4
Pig.prototype = {
"吃草": function() {},
"犁田": function() {}
};
var niu= new Pig();
alert(pig instanceof Pig); //=> false
alert(niu instanceof Pig); //=> true

当未改变 Pig 的 prototype 时,猪还是猪,因此代码 3 中 pig 是 Pig 的实例。当改变 prototype 后,猪已经不是猪,而是披着猪皮的牛了。因此代码 4 中 pig 不再是 Pig 的实例,niu 反而是 Pig 的实例。

进一步分析前,先回顾一下 new 的内部机制。代码 2 中的 new Pig() 实际上等价为:

复制代码 代码如下:

// var pig = new Pig() 的等价伪代码:
var pig = (function() {
var o = {};
o.__proto__ = Pig.prototype; // line 2
Pig.call(o);
Pig.prototype = {/* some code */}; // line 4
return o; // line 5
})();

可以看出,在 line 2 时,o.__proto__ 指向了 Pig.prototype 指向的值。但在 line 4 时,Pig.prototype 指向了新值。也就是说,在 line 5 返回时,pig.__proto__ !== Pig.prototype. 正是这个变化,导致了代码 2 中的 pig 不是 Pig.

已经可以大胆推论出:instanceof 判断 pig 是不是 Pig 的依据是:看隐藏的 pig.__proto__ 属性是否等于 Pig.prototype !

为了进一步确认,我们可以在 Firefox 下模拟 instanceof 的内部实现代码:

复制代码 代码如下:

/**
* Gecko 引擎下,模拟 instanceof
*/
function _instanceof(obj, cls) {
// instanceof 的左操作数必须是非null对象或函数对象
if((typeof obj !== "object" || obj === null)
&& typeof obj !== "function") {
return false;
}

// instanceof 的右操作数必须是函数对象
if(typeof cls !== "function") {
throw new Error("invalid instanceof operand (" + cls + ")");
}

// 向上回溯判断
var p = obj.__proto__, cp = cls.prototype;
while(p) {
if(p === cp) return true;
p = p.__proto__;
}
return false;
}

测试页面:simulate-intanceof.html

最后考考大家:

复制代码 代码如下:

function Bird() {}
var bird = new Bird();
var o = {};
bird.__proto__ = o;
Bird.prototype = o;
alert(bird instanceof Bird); // true or false?

时间: 2024-09-09 19:05:15

javascript instanceof 内部机制探析_javascript技巧的相关文章

Javascript 引擎工作机制详解_javascript技巧

Javascript 引擎工作机制 javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等,这些概念正是JS引擎工作的核心组件.这篇文章的目的不是孤立的为你讲解每一个概念,而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色. var x = 1; //定义一个全局变量 x function A

浅析在javascript中创建对象的各种模式_javascript技巧

最近在看<javascript高级程序设计>(第二版) javascript中对象的创建 •工厂模式 •构造函数模式 •原型模式 •结合构造函数和原型模式 •原型动态模式 面向对象的语言大都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象.虽然从技术上讲,javascript是一门面向对象的语言,但是javascript没有类的概念,一切都是对象.任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建:引用类型可以是原生的,也可以是自定义的.原生的引用类型有:Object.A

JavaScript中setTimeout的那些事儿_javascript技巧

一.setTimeout那些事儿之单线程  一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序.  但是,不知道大家有疑问没--就是我们在编程过程中的setTimeout(类似的还有setInterval.Ajax),不是异步执行的吗?!!  例如: <!DOCTYPE html> <head> <title>setTimeout</title> <meta http-equiv=&q

Javascript核心读书有感之语句_javascript技巧

在javascript中,表达式是短语,那么语句(statement)就是整句或命令.正如英文语句以句号结尾,javascript以分号结尾. 表达式计算出一个值,但语句使某件事发生. "使某件事发生"的一个方法是计算带有副作用的表达式.诸如赋值和函数调用这些有副作用的表达式,是可以作为单独的语句的.这种把表达式当做语句的用法也称做表达式语句(expression statement).类似的语句还有声明语句(declaration statement),声明语句用来声明新变量或者定义

JavaScript导出Excel实例详解_javascript技巧

本文实例讲述了JavaScript导出Excel的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>WEB页面导出为EXCEL文

javascript排序函数实现数字排序_javascript技巧

javascript排序函数实现数字排序 <script> function SortNumber(obj,func) //定义通用排序函数 { //参数验证,如果第一个参数不是数组或第二个参数不是函数则抛出异常 if(!(obj instanceof Array) || !(func instanceof Function)) { var e = new Error(); //生成错误信息 e.number = 100000; //定义错误号 e.message = "参数无效&q

JavaScript中的数组特性介绍_javascript技巧

与Java语言不同,JavaScript中的数组拥有三个特性:   1.无类型.数组的成员可以是任何类型,同一个数组也可以由很多不同类型的成员所组成. 2.长度可变.数组的长度是可以动态变化的,因此在JavaScript中不存在数组访问的越界问题. 3.不连续性.数组中成员的位置可以是连续的(0, 1, 2, 3-),也可以是不连续的.任何数组都有一个名为length的属性,在数组成员连续的情况下,length值与数组成员数目一致:当数组成员不连续时,length值要大于数组成员的数目.与连续的

JavaScript代码里的判断小结_javascript技巧

比较判断 比较判断是比较两个值,返回一个布尔值,表示是否满足比较条件.JavaScript一共提供了8个比较运算符,这里主要说一下严格相等运算符和相等运算符的区别 严格相等运算符=== 判断 返回 两个值类型不同 false 两个值都是null/undefined/true/false true 两个值其中之一为NaN false 两个值都为数值且值相等 true 两个值都为字符串,且值相等 true 两个值都指向同一个引用类型 true 1 === "1" // false true

浅谈JavaScript 覆盖原型以及更改原型_javascript技巧

覆盖原型 //囚犯示例 //1.定义原型对象 var proto = { sentence : 4, //监禁年限 probation: 2 //缓刑年限 }; //2.定义原型对象的构造函数 var Prisoner = function(name, id) { this.name = name; this.id = id; }; //3.将构造函数关联到原型 Prisoner.prototype = proto; //4.实例化对象--采用工厂函数实例化对象 var makePrisoner