javascript中的原型链深入理解

 要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象。在javascript中,函数就有2个功能 
 
第一、 作为一般函数调用 
第二、 作为它原型对象的构造函数 也就new() 
 
我们来看一个例子 
 代码如下:
function a(){ 
this.name = 'a'; 

 
当创建一个函数,它会发生什么呢? 
 
第一、它会创建1个函数对象 也就是a 本身 
 
第二、它会创建1个原型对象@a(用@来表示) 
 
第三、函数对象会有一个prototype指针,它指向了对应的原型对象,这里就指向了@a 
 
第四、@a对象中有一个construtor指针,指向它的构造函数,这里就指向了a 
 
http://img.blog.csdn.net/20140222125611500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGpsMTU3MDEx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA
==/dissolve/70/gravity/SouthEast 
 
这个prototype属性究竟有什么用呢? 
 
其实prototype 属性表示当前函数能够控制的范围(或者说它指明了当前函数是谁的构造函数),这里a就是@a原型对象的构造函数,所以我们会看见有这种写法 
 
代码如下:
function a(){ 
this.name = 'a'; 

 
var a1 = new a(); 
 
 
这就和其他常见语言相似了,new 就是调用原型对象(通过prototype指针)里面构造函数(constructor)创建一个新的对象实例。 
 
那么修改了prototype指向对象里面的属性,也就影响了所有以它为模板创建的实例,我们可以这样来验证 
 
 代码如下:
function a(){ 
this.name = 'a'; 

 
var a1 = new a(); 
a.prototype.age = 1; 
alert(a1.age); 
 
结果:1 
 
那为什么a1对象可以直接访问到age属性呢?a1对象里面我并没有定义age属性啊, 
 
那是因为所有实例里面都会有一个引用_proto_(在firfox,chrome下可以直接访问,ie不支持)指向了这个原型,这里就是指向了@a, 
 代码如下:
function a(){ 
this.name = 'a'; 

 
var a1 = new a(); 
alert(a1._proto_ == a.prototype) 
 
结果:true 
 
在访问属性的时候,会先在a1对象内部中寻找,如果没有,就会顺着_proto_指向的对象里面去寻找,这里会到@a中寻找,找到就返回值,没有找到就返回undefined,用个成语来形容,就是顺藤摸瓜嘛! 
 
至此原型链的含义就出来了,由于原型对象也有一个_proto_指针,又指向了另一个原型,一个接一个,就形成了原型链。Object.prototype是最顶层的原型,所以如果修改了Object.prototype的属性,那么就影响了所有的对象。 
 
在来看一段代码 
 代码如下:
function a(){ 
this.name = 'a'; 

 
function b(){ 
this.age = 1; 

 
b.prototype = new a(); 
alert(new b().name); 
 
我们显示的将b的原型指向了a的一个实例,然后,b的实例也可以访问a的属性了。这就是javascript的继承了,那为什么b.prototype 指向的是a的一个实例,而不是直接指向a.prototype 呢? 
 代码如下:
b.prototype = new a.prototype; 
 
如果像上面这么写,修改p.prototype中的属性,那么a的原型也会改变了,相当于是子类修改了父类,并且子类和父类的属性糅合在了一起,这显然是不合适的。换句话说,b也成为了@a的构造函数,a,b成了平级的关系。 
 
我们可以下一个定义: 
 
函数a 继承函数b 也就是让函数a成为函数b原型的一个实例的构造函数,构造函数里面声明的属性是函数a自己的,原型实例里面的属性就是继承b的 
代码如下:
var $ = jQuery = function(selector,context){ 
//不可能在自己的构造函数中又一次构造自己,所以返回了另外一个构造函数的实例 
return new init(selector,context); 

jQuery.fn = jQuery.prototype = { 
size:function(){ 
return this.length; 


 
function init (selector,context){ 
 

init.prototype = jQuery.fn;; 

 
这是jquery的一段源码,我们在使用jquery的时候,并没有使用new关键字,那它是如何构造对象的呢? 
 
用上面的知识,可以解释,jquery这里只是一个一般函数的调用,它返回了jquery原型的另外一个构造函数创建的对象,也就是new init() 

时间: 2024-11-01 03:29:06

javascript中的原型链深入理解的相关文章

javascript中的原型链深入理解_基础知识

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言.类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象.在javascript中,函数就有2个功能 第一. 作为一般函数调用 第二. 作为它原型对象的构造函数 也就new() 我们来看一个例子 复制代码 代码如下: function a(){ this.name = 'a'; } 当创建一个函数,它会发生什么呢? 第一.它会创建1个函数对象 也就是a

JavaScript中的原型链prototype介绍_javascript技巧

JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property).对于每个对象来说,可以用以下三种方式来访问其原型对象: 1.__proto__.可以通过对象的__proto__属性来访问其原型对象.该属性仅在Firefox.Safari和Chrome中得到支持,在IE和Opera中不支持. 2.Object.getPrototypeOf().可以将对象作为参

JavaScript中原型和原型链详解

 这篇文章主要介绍了JavaScript中原型和原型链详解,本文讲解了私有变量和函数.静态变量和函数.实例变量和函数.原型和原型链的基本概念,需要的朋友可以参考下     javascript中的每个对象都有一个内置的属性prototype,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用.意思是是prototype属性保存着对另一个JavaScript对象的引用,这个对象作为当前对象的父对象. 复制代码 代码如下: A.prototype = new B();

JS原型、原型链深入理解_javascript技巧

原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"prototype"属性,函数对象有"prototype"属性,原型对象有"constructor"属性. 一.初识原型在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个"[[Prototype]]"内部属性,这个属性所对应的就是该对象的原型. "[[Prototype]

JS原型链怎么理解_javascript技巧

在谈原型链之前,我们首先要了解自定义函数与 Function 之间是什么关系,而构造函数.原型和实例之间又存在什么千丝万缕的关系呢?其实,所有的函数都是 Function 的实例.在构造函数上都有一个原型属性 prototype,该属性也是一个对象:那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数:而实例对象上有一个 _proto_ 属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用. // _proto_ 在函数里有一个

JavaScript中的原型和继承详解(图文)_javascript技巧

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

javaScript中的原型解析【推荐】_javascript技巧

最近在学习javaScript,学习到js面向对象中的原型时,感悟颇多.若有不对的地方,希望可以指正. js作为一门面向对象的语言,自然也拥有了继承这一概念,但js中没有类的概念,也就没有了类似于java中的extends,所以,我觉得js中的继承主要依赖于js中的原型(链). 那么,原型是什么呢?我们知道js中函数亦是一种对象,当我们创建一个函数时,其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原型属性,他是一个指针,指向了这个函数的原型对象,这个原型对象有一个默认的

让JavaScript中setTimeout支持链式操作的方法

  这篇文章主要介绍了让JavaScript中setTimeout支持链式操作的方法,本文直接给出代码实例,需要的朋友可以参考下 修改很简单,通过参数判断,然后返回下promise对象 代码如下: (function() { var timeout = setTimeout; window.setTimeout = function(fn, time) { if (!time) { time = fn; return $.Deferred(function(dfd) { timeout(func

理解javascript中的原型和原型链_基础知识

原型 大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype 原型模型.代码实现大概是这样子的 function Student(name){ this.name = name; } var Kimy = new Student("Kimy"); Student.prototype.say = function(){ console.log(this.name + "say"); } Kimy.say(); //Kimysay