首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript中为何要使用prototype

JavaScript中为何要使用prototype

作者头像
八哥
发布于 2022-05-11 03:39:42
发布于 2022-05-11 03:39:42
3580
举报
文章被收录于专栏:快乐八哥快乐八哥

在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.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012-12-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript基础①
你点我一下试试 <a href="javascript: alert('kick your ass');">你点我一下试试</a>
ymktchic
2022/01/18
3K0
JavaScript基础①
【JavaScript】内置对象 - Date 日期对象 ② ( 日期格式化 | 获取年 - getFullYear | 获取月 - getMonth | 获取每月的第几天 - getDate )
Date 日期对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date
韩曙亮
2024/05/04
4150
【JavaScript】内置对象 - Date 日期对象 ② ( 日期格式化 | 获取年 - getFullYear | 获取月 - getMonth | 获取每月的第几天 - getDate )
vue--过滤器(私有,全局)
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
eadela
2019/12/16
4540
Date.prototype.format
Date.prototype.format = function(format){
李才哥
2019/07/23
9790
Date.prototype.format
Javascript对象归纳
注释:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
全栈程序员站长
2021/12/23
8220
vue笔记2 -过滤器,v-­text ,v-­html ,v­-bind,v-on指令
Vue. 支持在{{}}插值的尾部添加一小管道符 “ | ” 对数据进行过滤, 经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。
bamboo
2019/01/29
1.5K0
vue笔记2 -过滤器,v-­text ,v-­html ,v­-bind,v-on指令
《现代Javascript高级教程》Date类:日期和时间处理
在JavaScript中,Date类是用于处理日期和时间的内置类。它提供了一系列属性和方法,使我们能够操作和管理日期、时间、时区等相关信息。本文将详细介绍Date类的属性、常用方法以及应用场景,并提供相应的代码示例。
linwu
2023/07/27
6340
vue基础(二)
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
不愿意做鱼的小鲸鱼
2022/09/24
6570
vue基础(二)
JavaScript 总结(前端常用工具类的封装)
JavaScript (class是ES6的新东西,看着不爽可以变,但主要还是里面的方法) 1. type 类型判断 class TypeFn { isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber (o) { //是否数字 return Object.prototype.toString.call(o
纪莫
2018/04/19
2.5K1
原生态纯JavaScript 100大技巧大收集---你值得拥有(1--50)
1、原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str
用户1272076
2019/03/26
6510
javascript_时间自动刷新
=========================================================
Hongten
2018/09/13
1.9K0
javascript_时间自动刷新
Javascript常用API备忘录
Bom常见API 获取浏览器信息 var ua = navigator.userAgent if (ua.indexOf('Chrome')){ console.log("这是一个chrome浏览器!"); } 获取屏幕宽度和高度 screen.width screen.height url拆解 // 获取当前页面网址(也可以通过赋值进行跳转) location.href // 获取协议 location.protocol // 获取路径(不包含域名) location.pathname /
zhaoolee
2018/04/19
7660
Javascript常用API备忘录
javascript获取当前系统时间代码_获取当前系统时间
大家好,又见面了,我是你们的朋友全栈君。 JavaScript 获取当前时间time 开发常用时间笔记 JS获取当前时间 Js获取当前日期时间及其它操作 ** 谨记要懂得经常在控制台输出结果 **
全栈程序员站长
2022/11/09
19.4K0
【Vue】(2)基础知识 | 过滤器 | 指令
前端修罗场
2023/10/07
2840
JavaScript学习总结(三)
在学习完了基本的内容之后,我们来学习一下JavaScript中的对象部分以及如何自定义对象的问题。
roobtyan
2019/02/21
6610
开发你不能忽略的问题?JavaScript(JS)
一、JavaScript基础加强 JavaScript是在浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,所有变量使用var定义。 JavaScript的3个组成部分分别为:核心(
Java帮帮
2018/03/19
1.3K0
开发你不能忽略的问题?JavaScript(JS)
JavaScript——内置对象(Math对象、日期对象)
前面两种对象是JS基础内存,属于ECMAScript,第三种浏览器对象属于我们JS独有的。
岳泽以
2022/10/26
2K0
JavaScript——内置对象(Math对象、日期对象)
好多Javascript日期选择器呀–3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0045)<a href="http://e.goldia.cn/plus/calendar/calendar.htm" target="_blank">http://e.goldia.cn/plus/calendar/calendar.htm</a> --> <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT type=text/javascript> String.prototype.Format = function(){ var tmpStr = this; var iLen = arguments.length; for(var i=0;i<iLen;i++){ tmpStr = tmpStr.replace(new RegExp("//{" + i + "//}", "g"), arguments[i]); } return tmpStr; } Calendar = { //region Property today :new Date(), year:2005, month:8, date:21, curPosX:0, curPosY:0, curCapture:null, curDay:null, //endregion
Java架构师必看
2021/03/22
8610
使用 JavaScript 自动化你的 Mac
IMWeb前端团队
2017/12/29
3.3K0
前端-JavaScript 有用的代码片段和 trick
解析允许字符串中含有非数字字符,解析按从左到右的顺序,如果遇到非数字字符就停止。而转换不允许出现非数字字符,否者会失败并返回NaN。
grain先森
2019/03/29
1.1K0
推荐阅读
相关推荐
JavaScript基础①
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档