js prototype 原型

(1)原型理解:

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A

首先定义了baseClass类,然后我们要定义extentClass

function baseClass()

{

this.showMsg = function()

{

alert("baseClass::showMsg");

}

}

function extendClass()

{

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

instance.showMsg(); // 显示baseClass::showMsg

(2)原型定义:

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript 就创建了一个对应的原型对象,也就是说,当我们定义一个函数的时候,实际上得到了两个对象,一个函数对象,一个原型对象。原型对象是一个特殊的对象,函数的 prototype 成员指向它的原型对象。

可以通过函数对象的 prototype 成员取得这个原型对象的引用。

每个对象也都有一个原型成员 prototype,通过 new 函数创建的对象会通过函数的 prototype 找到函数的原型,然后将自己的原型指向这个对象。对于不是通过函数创建的对象实例和原型对象,它们的原型会被设置为 Object 函数的原型对象。

Object 函数对象是 JavaScript 中定义的顶级函数对象,在 JavaScript 中所有的对象都直接或者间接地使用 Object 对象的原型。 当访问对象的属性或者方法的时候,如果对象本身没有这个属性或者方法,那么,JavaScript 会检查对象的 prototype 对象是否拥有这个属性或者方法,如果有,则作为对象的属性或者方法返回,如果没有,那么将通过原型对象的 prototype 继续进行检查,直到原型对象为 Object 函数的原型对象为止。

但是 prototype 是一个特殊的属性,在大多数的浏览器上,例如 IE 浏览器,都不能直接访问对象的 prototype 成员。返回的结果为 undefined。不能赋予对象一个新的原型,只能通过创建它的函数来确定对象的原型。

A.prototype = new B();A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

javascript的方法可以分为三类:

function People(name)

{

this.name=name;

//对象方法

this.Introduce=function(){

alert("My name is "+this.name);

}

}

//类方法

People.Run=function(){

alert("I can run");

}

//原型方法

People.prototype.IntroduceChinese=function(){

alert("我的名字是"+this.name);

}

var p1=new People("Windking");

p1.Introduce();

People.Run();

p1.IntroduceChinese();

关于extendClass与baseClass的方法同名的方法解决办法,函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。

function baseClass()

{

this.showMsg = function()

{

alert("baseClass::showMsg");

}

}

function extendClass()

{

this.showMsg =function ()

{

alert("extendClass::showMsg");

}

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

instance.showMsg();//显示extendClass::showMsg

使用extendClass的一个实例instance调用baseClass的对象方法showMsg:

extendClass.prototype = new baseClass();

var instance = new extendClass();

var baseinstance = new baseClass();

baseinstance.showMsg.call(instance);//显示baseClass::showMsg,将instance当做baseinstance来调用,调用它的对象方法showMsg”。为什么不用baseClass.showMsg.call(instance);这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法。

<script type="text/javascript">

function baseClass()

{

this.showMsg = function()

{

alert("baseClass::showMsg");

}

this.baseShowMsg = function()

{

alert("baseClass::baseShowMsg");

}

}

baseClass.showMsg = function()

{

alert("baseClass::showMsg static");

}

function extendClass()

{

this.showMsg =function ()

{

alert("extendClass::showMsg");

}

}

extendClass.showMsg = function()

{

alert("extendClass::showMsg static")

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

instance.showMsg(); //显示extendClass::showMsg

instance.baseShowMsg(); //显示baseClass::baseShowMsg

instance.showMsg(); //显示extendClass::showMsg

baseClass.showMsg.call(instance);//显示baseClass::showMsg static

var baseinstance = new baseClass();

baseinstance.showMsg.call(instance);//显示baseClass::showMsg

</script>

时间: 2024-10-13 19:24:36

js prototype 原型的相关文章

深入理解js——prototype原型

之前(深入理解js--一切皆是对象)中说道,函数也是一种对象.它也是属性的集合,你也可以对函数进行自定义属性.而JavaScript默认的给了函数一个属性--prototype(原型).每个函数都有一个属性叫做prototype(原型). 这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身. prototype(原型)既然作为对象即属性的集合,不可能就只弄个constructor来玩玩,肯定可以自定义的增加许多属性

JS原型,Prototype,原型

对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可以比较自信的驾驭这种语言了. 大家都知道,javascript中的继承不是使用的类继承的机制,而是使用的另一种方式 – 原型继承.在原型继承方式中,本质上是javascript语言加入原型链这种机制,从而实现了面向对象的重要特性之一 – 继承.在这篇博文中,基于个人的理解,来说说javascript

原生js的Function,Array,Object构造函数的prototype原型方法扩展

在js中,Function构造函数的实例化对象为Function,Array,Object构造函数. <script> Function.prototype.addMethod = function (name,fn) { this.prototype[name]=fn; } Array.addMethod('test',function(){ console.log('Array method add'); }); Object.addMethod('test',function(){ co

js prototype

prototype 原型. 我们每创建一个函数 都会创建一个 prototype的属性,这个属性指向了这个函数的原型对象. function A(){}  ,A.prototype  ,prototype原型只能运用在对象上,不能运用在对象的实例上 也就是说 A.prototype 是可以的 var a=new A(),  a.prototype 是不可以的. 所有对象的实例共享原型对象.什么意思如下: function A(){} A.prototype.Name="张三"://为原

打好基础:了解prototype原型链

一.什么是prototype 在创建构造函数时,如果在函数内进行变量声明,声明的将是私有变量,外部无法访问.会使用this来进行实例变量和函数的声明,以保证通过使用该构造函数来声明的对象可以调用这些变量和函数.然而生命实例函数会在每次新建一个对象时都复制一个一模一样的函数到栈空间,十分浪费资源.prototype可以帮助我们解决这个问题,每个构造函数都有一个原型对象,同时都有一个prototype属性,这个属性指向构造函数的原型对象,它被用来实现基于原型的继承和共享.prototype在该变量内

Javascript讲解系列之一 Prototype原型链

以前没有写博客的习惯,许多的技术积累都是自己稍微总结一下,很少共享,并非自私,而是工作比较忙,前几天接到一个电话面试不理想,才发现公司所用的DOJO并不被外面广泛接受,故而决定把自己所学分享出来,为夯实基础,也为与外界交流思想,形成一种渠道,如需联系,请发送至邮箱:[email protected]. 今天写Javascript系列之第一篇:Prototype原型链.在软件园里随便拉一个码农估计都会写JS,大部分也知道JS是基于原型的语言,但是如果问及JS原生对象(Object,Function

js深入学习-js prototype constructor属性区别

在很多js 插件中出现这两个属性的频率很高,我自己写插件时,也用到过,知道用,不知道具体的区别,今天研究了下, constructor 返回的是对象(类型的实例)的构造函数,通过prototype 添加的属性和方法不会返回. prototype 返回的是类型的原型,不会饭后构造函数部分. 实例如下: <html> <head> <script type="text/javascript">    var cat=function (name,sex)

关于js中原型链的理解

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象指向函数的原型对象.在默认情况下,所有原型对象都会自动获得一个 constroctor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针.例如: function Person(){} 当我们创建这个Person函数(对象)的时候,该函数便有了一个prototype属性,它的

javascript学习:闭包和prototype原型使用基础

闭包 function Person(name) { this.Username = name; var Userage = 18; //通过这种方法可以模拟私有成员 //类似于private成员 this.setAge = function (age) { Userage = age; } //类似于public成员 this.getAge = function () { return Userage; } } var p1 = new Person("huahuah"); p1.s