对原型prototype的详解
刚开始接触对象原型时大脑就开始起义了,脑子就转不灵清了。就感觉怎么着这个概念就是灌输不进去,俗称断路。后面找了很多资料,最主要的还是要借助于《JavaScript语言精髓》这本书,让我对这此豁然开朗,希望说的不对的地方请给予指正,谢谢。
一、什么是原型?
原型包含一个对象("prototype"对象),是构造函数特有的属性。将所有实例对象共享的属性和方法放在里面,不需要共享的属性和方法则放在构造函数里面。它能继承私有和共享属性和方法。
二、prototype实例
首先创建一个构造函数,具有name属性。
function Person(name){
this.name = name;
}
构造函数创建好之后,我想创建两个实例,并且输出他们的name值。
var p1 = new Person("张三");
var p2 = new Person("李四");
console.log(p1.name+","+p2.name); /* 输出张三,李四*/
那现在我想给p1张三在添加一个eat属性,我要他可以吃饭(food),那既然你张三都可以吃饭,那我李四要要吃饭,那我也输出p2.eat,但是结果是undefined……如下所示。
p1.eat = "food";
console.log(p1.eat); /* 输出food */
console.log(p2.eat); /* 输出undefined */
原来是张三自己偷偷摸摸的去吃饭,没让李四知道,哎╮(╯▽╰)╭。那既然这样,Person就不得不添加一个共用属性eat了,得让大家一起吃饭呀。
Person.prototype.eat = "food";
console.log(p1.eat); /* 输出food */
console.log(p2.eat); /* 输出food,我也可以吃饭了…… */
添加Person.prototype.eat = "food"这个以后,eat属性就被添加到原型库中,eat属性就可以共享了(李四说“太好了,我也可以吃饭了o(≧v≦)o~~”)。这个属性和方法(方法类似处理)的问题就解决了,那如果出现两个对象Person和Student,Person还是具有构造函数的name属性和用prototype添加的eat属性,我想让Student继承Person中所有的属性和方法,请看第三点。
三、prototype继承实例
首先创建Person和Student构造函数(为了方便看,构造函数和实例输出一起写了)。
function Person(name){
this.name = name;
}
Person.prototype.eat = "food";
function Student(name,eat){
Person.apply(this,arguments); /* 继承构造函数,即私有属性 */
}
var s1 = new Student("王五","food");
console.log(s1.name); /* 输出 王五 */
console.log(s1.eat); /* undefined */
Student要继承Person中的属性,添加Person.apply(this,arguments) (标注:apply中this表示实例化的对象s1,arguments是new Student()中的参数,这是系统执行的),表示Student继承Person中属性。创建一个实例s1,s1输出正常,为什么s1.eat输出undefined?Person中不是已经添加了eat属性吗?为什么还不行呢?我找啊找,最终发现原来是Person.apply(this,arguments)只能继承构造函数中的属性,哎,真是弱爆了。那我想要继承原型中的属性怎么办?那容易,请看下面代码。
Student.prototype = new Person(); /* 继承原型,即共享属性 */
var s1 = new Student("王五","food");
console.log(s1.name); /* 输出 王五 */
console.log(s1.eat); /* 输出 food */
添加一个Student.prototype = new Person()就可以了。
这里做一个特别解释:
Student具有prototype这个属性的原因是因为它是一个function一个构造函数,前面我提到过,这个是构造函数特有的属性。如果student是这样的。
var student = {
name: "张三"
}
那就要报错了,说student不是一个function。这个是大家特别注意的。
还有为什么要new Person()呢,这个和java中类似,但是在javascript中只针对于构造函数(构造函数中函数命名和类命名类似,首字母要大写),其他不需要new。
有哪里讲解的不好或者是不正确的地方,希望大家能第一时间反馈给我,希望和大家共同进步,谢谢。
对原型prototype的详解的更多相关文章
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- 最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)
最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入
- JS原型与原型链终极详解(转)
JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...
- ProtoType原型和__Proto__原型链的详解
var arr = new Array(12,13,14,15,16,17,18); var arr2 = new Array(12,13); arr.sun=function(){ //用原型加Ar ...
- js重点--原型链继承详解
上篇说过了关于原型链继承的问题,这篇详解一下. 1. function animals(){ this.type = "animals"; } animals.prototype. ...
- 【repost】JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- Javascript中prototype属性详解
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
随机推荐
- [BZOJ 1295][SCOI2009]最长距离(SPFA+暴力)
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1295 分析:很巧妙的一道spfa从搜索的角度是搜索在所有1中搜索删除哪T个1,对整个图询问,这 ...
- 【Moqui业务逻辑翻译系列】--UBPL Introduction同意的商业处理文库介绍
h1. UBPL Introduction 通用的商业处理文库介绍h4. Why a Universal Business Process Library? 为什么需要通用的商业处理文库? The g ...
- mysql配置详解
mysql有以下几种日志: 错误日志: log-err 查询日志: log 慢查询日志: log-slow-queries 更新日志: log-update 二进制日志: ...
- java.lang.NoSuchFieldError: deferredExpression
处理:遇到这个异常的时候是用jstl标签,是版本问题,由于MyEclipse添加Java EE5,其中自动包括了jstl1.2的版本,lib中又存在一个jstl1.1.2的jar包,把旧版本的删掉就可 ...
- [转]数据库物化视图刷新SQL命令和查询被delete掉的数据
原文地址:http://blog.csdn.net/wangyong191212/article/details/8024161 刷新物化视图的SQL命令: 在sql语句的命令窗口并输入如下命令: e ...
- Eclipse属性文件编辑器---Properties Editor
今天在用 Eclipse 来编辑 .properties 文件时,写的中文会自动转为 Unicode 编码,完全不知道自己的中文写的是什么!! 于是查了一下,网上推荐,在Eclipse 中 安装一个 ...
- 15.Android中LinearLayout布局一些小记录
在App中,我们经常看到布局中会有分割线,直接上代码: <?xml version="1.0" encoding="utf-8"?> <Lin ...
- POJ-2777Count Color 线段树+位移
这道题对于我这样的初学者还是有点难度的不过2遍A了还是很开心,下面说说想法-- Count Color Time Limit: 1000MS Memory Limit: 65536K Total Su ...
- 【poj3348】 Cows
http://poj.org/problem?id=3348 (题目链接) 题意 给出平面上n个点,以这n个点中的一些围成的多边形面积 div 50的最大值. Solution 凸包求面积. 很好做, ...
- [NOIP2010] 提高组 洛谷P1541 乌龟棋
题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...