当前位置：凯发k8官方网 > 前端技术 > javascript >内容正文

javascript

浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系 -凯发k8官方网

发布时间：2024/10/12 javascript 24 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系小编觉得挺不错的,现在分享给大家,帮大家做个参考.

一下内容是本人的学习之余为了增强记忆做的笔记，理解上或者有些肤浅，望高手莫笑；同时，既然是笔记，就难免有错误，若给各位造成误解还望海涵，也希望多多指教，谢谢！

首先说一下javascript中prototype的作用；该对象的用途是包含一种类型的所有实例都能共享的一些属性和方法，即如果为一个类型的prototype对象定义了一些属性，则该类型的所有实例都能访问到这些属性。请看下面例子：

function person(name,sex){ this.name=name; this.sex=sex; } person.prototype.sayhello=function(){ alert("hello,i am " this.name); }

定义一个person对象，该对象有两个属性name和sex，为该对象的prototype属性定义一个sayhello方法;下面我们可以new两个person的实例：

var person1=new person("andy","man"); var person2=new person("jacky","man");

现在，person1和person2都可以调用sayhello方法，因为sayhello方法属于person的原型对象，而该对象的所有属性对于person的所有实例都是公用的。调用sayhello：

person1.sayhello();//hello,i am andy. person2.sayhello();//hello,i am jacky.

js完全可以用另外一种方式给一个对象定义方法：

function person(name,sex){ this.name=name; this.sex=sex; this.sayhello=function(){ alert("hello,i am " this.name); } }

但是这种方式明显有一个问题，就是当我创建n个person实例的时候会创建n个sayhello方法，而且这些方法功能相同！这很明显不合理，而用原型就能很好的避免这个问题，所以prototype的优越性也就体现出来了！同样用prototype还可以在js中实现继承。

用prototype实现继承：

首先我定义一个animal对象，然后让person继承animal.

定义animal对象：

function animal(){} animal.prototype.cando(){ alert("吃饭，睡觉……"); }

让person对象继承animal：

person.prototype=new animal();

现在person对象的实例就可以访问animal的方法了：

person1.cando();//吃饭、睡觉……

javascript中的构造函数：

javascript中并没有提供一些像c#那样创建类的特殊语法。创建构造函数也和普通的函数并没有什么不同，只是写法上有些特定的规则（首字母大写）。

如果用new关键字调用该函数，则也就创建了个新实例，该函数会被当做构造函数调用。如果当成一般的函数调用，会出现一些值得注意的现象，请看下面的代码：

person("mr zhang","man"); alert(window.name);//mr zhang

很明显，如果这样调用一个构造函数，则该函数的参数将被赋予window对象，也就是全局变量。

下面说一下原型、构造函数和对象实例三者之间的关系。

当你创建一个对象的时候，也就同时也创建了一个该对象的prototype对象，也就是说prototype是构造函数的一个属性。而在prototype对象里同样有一个属性：constructor，该对象指向构造函数（没有通过prototype实现继承的情况下），例如：

alert(person.prototype.constructor);

person对象的每个实例（person1、person2）都有一个_proto_属性，该属性指向构造函数的prototype对象。可以用isprototypeof（该方法用来测试原型是否存在于一个对象的实例中，是则返回true，否则返回false）进行测试：

person.prototype.isprototypeof(person1);//true

转载于:https://www.cnblogs.com/jiangdd/archive/2012/12/17/2822176.html

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。