JavaScript中为何要使用prototype

在JavaScript学习和工作中,或多或少会接触一些底层的JavaScript知识。比如下面四个基本概念:

1.prototype

2.this关键字

3.原型继承

4.JavaScript闭包

个人觉得的看得越多,技术好像也越来越复杂。之前看完《Head First JavaScript》,这本书里面讲到了this关键字和prototype的概念。一下是个人的笔记和理解。

JavaScript不是真正的面向对象(oop),但是很多开发者尝试使用编写Java/C#的方法去编写JavaScript代码,一方面是容易理解,另一方面也是后期代码中更容易维护,更容易调试等方便。

prototype的出现是为了解决在传统代码中,我们每创建一个对象实例,每个实例都会有重复的方法,这样在创建数量较多的对象实例时,代码冗余,占用内存多。所以将对象的方法放到类中。称为:类拥有的方法。Class-owned method.

代码举例,创建一个blog的程序。每个blog对象有发表时间,内容2个属性,查找内容,分行高亮数据,显示详细时间的三个方法。

//常见的写法

function Blog(body,date){

//properties

this.body=body;

this.date=date;

//methods

this.toString=function(){

return "["+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"]"+this.body;

};

this.toHTML=function(highlight){

var blogHTML="";

blogHTML+=highlight?"<p style='background-color:#eee;'>":"<p>";

blogHTML+="<strong>"+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"</strong><br/>"+this.body+"</p>";

return blogHTML;

};

this.containsText=function(text){

return (this.body.toLowerCase().indexOf(text.toLowerCase())!=-1);

}

}

创建三个对象实例:

var blog1=new Blog("hello world",new Date());

var blog2=new Blog("this is a test",new Date());

var blog3=new Blog("do you like javascript?",new Date());

那么实际上,三个对象都copy对象的三个方法,一个9个方法。通过引入prototype,可以用改进代码,将对象实例的三个共有方法使用prototype添加到“类”Blog中。改进后的代码如下:

function Blog(body,date){

//instance property

this.body=body;

this.date=date;

//instance method

this.showVersion=function(){

return "version1.0";

}

//创建每个对象时,实例的属性和方法都会复制一遍

}

//return a string repsentation of the blog entry

Blog.prototype.toString=function(){

return "["+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"]"+this.body;

}

//return a formatted HTML

Blog.prototype.toHTML=function(highlight){

var blogHTML="";

blogHTML+=highlight?"<p style='background-color:#eee;'>":"<p>";

blogHTML+="<strong>"+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"</strong><br/>"+this.body+"</p>";

return blogHTML;

}

//check if the blog body content contains a string

Blog.prototype.containsText=function(text){

return (this.body.toLowerCase().indexOf(text.toLowerCase())!=-1);

}

然后创建三个对象实例,那么三个方法都是公用“类”的那一份,所以只有唯一一份的方法。

var blog1=new Blog("hello world",new Date());

var blog2=new Blog("this is a test",new Date());

var blog3=new Blog("do you like javascript?",new Date());

后面复杂的原型继承也使用到了prototype,情况和场景要比这里复杂,不过个人觉得head first能把为什么要使用prototype说明白,已经对初学者帮助很大。

小结:

Classes vs instances

Class properties and methods

类拥有的属性和方法。通过使用prototype可以为“类”添加属性和方法。

Instance properties and methods

实例的属性和方法,在对象中使用this关键字的方法或者属性都是对象实例方法和属性

Own once, run many: class-owned methods only one copy shared for all instances.

Use prototype to work at a class-level

Prototype"对象"是每个对象的一个隐藏属性, prototype可以允许你可以在class级别为对象添加属性和方法。

A class property is stored once in a class but accessible to all instances.

 

时间: 2024-09-08 22:53:31

JavaScript中为何要使用prototype的相关文章

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

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

在JavaScript中实现继承

javascript|继承 JavaScript脚本语言是一种功能强大的面向对象的语言.本文描述了如何在JavaScript中实现继承. Prototype JavaScript没有实现类继承,但可以通过prototype实现.每个JavaScript类中都包含一个prototype对象,当访问一个对象的属性和方法时,它首先从当前对象查找,如果该属性在JavaScript类定义,则直接访问:否则,从类的prototype对象中查找,如果找到则直接访问,否则从prototype的prototype

浅谈Javascript中的函数、this以及原型_javascript技巧

关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

JavaScript中String.prototype用法

  本文实例讲述了JavaScript中String.prototype用法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=function() { return this.replace(/[^x00-xff]/g,"**").len

Javascript中prototype属性实现给内置对象添加新的方法

  本文实例讲述了Javascript中prototype属性实现给内置对象添加新的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con

JavaScript中通过prototype属性共享属性和方法的技巧实例

 这篇文章主要介绍了JavaScript中通过prototype属性共享属性和方法的技巧实例,本文直接给出一个代码实例,需要的朋友可以参考下     具体代码如下:   代码如下: //定义函数 function people(name,sex,age){ this.name = name; this.sex = sex; this.age = age; } //共享isStudent与sayName方法 people.prototype = { isStudent:true, sayName:

JavaScript中的prototype和constructor简明总结

 一直没弄清楚JavaScript中的prototype和constructor属性,今天看了看书,总算有点眉目了 一.constructor constructor的值是一个函数.在JavaScript中,除了null和undefined外的类型的值.数组.函数以及对象,都有一个constructor属性,constructor属性的值是这个值.数组.函数或者对象的构造函数.如:   代码如下:var a = 12, // 数字     b = 'str', // 字符串     c = fa

JavaScript中的prototype.bind()方法介绍

 在JavaScript中,我们经常用到函数绑定,而当你需要在另一个函数中保持this上下文时,使用Function.prototype.bind()会很方便 以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业. 下面举个简单的例子:   代码如下: var myObj = {     specialFunction: function () {     },     anot

JavaScript中的prototype使用说明_javascript技巧

1.prototype 在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承.这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释. 2.简单的例子 复制代码 代码如下: var Blog = function( name, url ){ this.name = name; this.url = url; }; Blog.prototype.jumpurl = ''; Blog.prototype.jump = fu