js原型链之我见

前两天从网上看到一个题目,大致内容如下:

var F=function(){};
Function.prototype.a=function(){console.log("a");};
Object.prototype.b=function(){console.log("b");};
var f=new F();

f.b();
f.a();

初看这道题,觉得很简单,应该会输出 "b" 和 "a"吧,但是实际运行起来,不是那么回事,实际结果是:第二个函数报错了,没有找到a的定义。怎么回事?

其实,这道题目主要考察大家对原型链的理解。我们知道,当一个对象其中找不到某个属性时,会沿着其原型链向上查看其它对象中是否有该属性,直到找到为止,如果都没有找到的话,这时就像上面的题目一样会报错了。

原型链是怎么构建起来的呢? 在js的世界里,万物皆对象,每个对象中都有一个私有的__proto__属性,该属性用来标识其上一级的原型对象,就这样通过这个属性把整个原型链构建起来。

而题目中的原型链又是怎样的呢?从原型链的最顶端开始(就是当前的对象f)构建原型链。我们知道__proto__属性值其实就是当前对象构造函数的prototype属性值,因此就有下面的等式:

f.__proto__===F.prototype;//f的构造函数是 F

F.prototype.__proto__===Object.prototype;  //F.prototype的构造函数是Object

同理,总结原型链如下:

f---->F.prototype---->Object.prototype---->null

F---->Function.prototype---->Object.prototype---->null

因此,f.a不存在就显而易见了。

时间: 2024-11-08 15:14:10

js原型链之我见的相关文章

js原型 作用域

了解JavaScript原型链之前首先肯定要知道什么是原型. JavaScript中,原型是一个对象,通过原型可以实现属性的继承.既然原型是一个对象,那么任何一个对象都可以称为原型吗?是,记住它.什么对象有原型?任何对象(undefined,null,boolean,number,string是主类型,不是对象)默认情况下都有一个原型,但是原型也是一个对象,所以对象的原型也有原型,记住,下面有用. js中的对象中都包含一个指向原型对象的指针,但是是不能被直接访问的,为了方便的看到原型,chrom

JS 原型链图形详解

JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象.这个prototype可以是一个对象或者null.* 让我们看一个关于对象的基本例子.一个对象的prototype是

JS原型和原型链

1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function subtract(x, y) { 9 return x - y; 10 } 11 12 //alert(add(1, 3)); 但是,这个并不能体现OOP思想,看了原型与原型链之后觉得OOP一目了然: 1 var Calculator = function (decimalDigits, tax) { 2 th

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

JS 原型

<!-- ———————————————— JS原型(prototype) ———————————————————— --> //构造函数模式 (W3C推荐使用) function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; this.sayName=function(){ return this.name; } } var person1=new Person("B",11,"

js原型解析

我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node.js一样的扩展语言,在最后上随着快速化,工程化,以及一些业务开发的需要,经过不断的完善,最后变成了一种angular的框架,这就是简单的js的发展历史,但是今天我们的重点不在于讲述js发展的历史,而注重在于分析其中原生态js的一些特性,诸如prototype. 译过来就是原型的意思,那么什么是原型呢

深入理解JS原型链与继承

我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天要讨论的主题,有许多人写过许多精彩的文章,但是今天我还是想把自己的理解的知识记录下来.我在学习 掌握JS原型链和继承的时候,就是看得@阮一峰老师的写的文章,觉得他写的技术类的文章都容易让理解,简明概要,又好理解.他是我学习JS路程里面一个比较佩服的导师,昨天重新看了他写的<Javascript 面向

js原型链与继承(初体验)

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

js原型链部分详细使用说明案例

1. 'index.html'文件 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原型讲解</title> </head> <body> <script src='js/person.js'></script> <script s