转自:http://www.cnblogs.com/gnface/archive/2012/08/22/2651534.html
学了3天的JS,一个原型对象直接把我搞懵了,原博主很给力,看了一遍就明白了。
书上对于原型对象的说法给我整的眼花缭乱,完全不知道它在说什么,查了好多资料,终于有了些理解,下面我以通俗的大白话说说我对原型对象的理解.
1.关于原型对象的重要知识点
首先要知道一个很重要的知识点,一句话:所有对象都有原型对象.
2. 对比其他语言的理解
原型对象,就是其它语言中的类中的静态属性和静态方法,总是是静态-static就对了.原理是: 内存中只有一份.
3. 在内存中的形象图:
首先,在产生js对象之前,我们需要创造一个构造函数(这都不知道,那就不要往下看了),如下:
function Person(name_, age_) {
this.name = name_;
this.age = age_;
}
下面,我们就要new 对象了,这里,我们new三个(Person)对象,"张三" "李雷" "韩梅梅",他们来自同一个构造函数Person:
内存中就这样了,每个对象,都有自己的 name, age 内存.这里new了多少个对象,就要开辟多少块name, age内存.
看到这,应该还是比较好理解的. 下面我们添加一条属性.location属性,如下:
function Person(name_, age_) {
this.name = name_;
this.age = age_;
this.location = "地球";
}
这时候 我们在new这三个人. 内存情况如下:
这里我们看,三个对象都有一个"地球"的内存空间. 这里你要动动大脑了, 三个人都有地球的内存,我们是不是可以这样呢?
你看这样好不好呢? 这样只需要一个地球,大家都可以用了. 看到这,好吧,公用的那个空间如果是个对象的话,就是所谓的原型对象了.饿?就这样?
是的,就这样.
原型对象,最重要的作用就是把常量和方法独立到自身里. 供给其它 "自己的对象" 使用. 最后如图:
4. 从代码的层次上介绍原型对象.
上图是内存中的对象,我们现在从代码的从面操作.
function Person(name_, age_) {
this.name = name_;
this.age = age_;
this.location = "地球";
}
// 三个具体的对象
var zhangsan = new Person("zhangsan", 21);
var lilei = new Person("lilei", 21);
var hanmeimei = new Person("hanmeimei", 21);
// 他们的原型对象是
Person.prototype.location = "地球";
Person.prototype.killPerson = function() {
return "杀人";
};
这里有一个问题,我们知道原型对象,可是我们怎么访问到原型对象里的属性呢. 就是我们如何获取到location ,和用 killPerson方法呢?
请看:
alert(zhangsan.location);
alert(zhangsan.killPerson());
这样就可以访问到了,不过前提是,你的对象属性里面,没有定义location和killPerson.不然会把原对象的覆盖掉. 这里面涉及到原型问题即,
在zhangsan.location的时候,首先,我们检查zhangsan对象本身,从图中我们知道,张三有 name, age 和prototype指针属性. 并没有location,找不到以后,它会继续搜索原对象里面,看能否找到location属性,如果有,就会调用原对象的属性.
所以alert(zhangsan.location) 会输出 "地球"
alert(zhangsan.killPerson() ) 会输出 "杀人"
以上是我个人对原型对象的理解,希望对大家有帮助
相关推荐
深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系
在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数、原型对象、实例三个好基友之间的关系:每一个构造函数都有一个“守护神”——原型对象,原型对象心里面也存着一个构造函数的“位置”,两情相悦,...
定义原型对象 var proto = { sentence : 4, //监禁年限 probation: 2 //缓刑年限 }; //2.定义原型对象的构造函数 var Prisoner = function(name, id) { this.name = name; this.id = id; }; //3.将构造函数关联...
类式继承模式#3——借用和设置原型 类式继承模式#4——共享原型 类式继承模式#5——临时构造函数 Klass 原型继承 通过复制属性实现继承 借用方法 小结 第7章 设计模式 单体模式 工厂模式 ...
1、【原型链继承】实现的本质是重写原型对象,代之以一个新类型的实例。实际上不是SubType的原型的constructor属性被重写了,而是SubType的原型指向了另一个对象——SuperType的原型,而这个原型对象的construtor...
<javascript>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数–>类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考. 如果不做说明,...
类式继承模式#3——借用和设置原型 类式继承模式#4——共享原型 类式继承模式#5——临时构造函数 Klass 原型继承 通过复制属性实现继承 借用方法 小结 第7章 设计模式 单体模式 工厂模式 迭代器模式 装饰者模式 策略...
这篇文章将带您探究JavaScript的一些特性,看看这些特性如何让它如此具有吸引力...灵活的对象模型:JavaScript的对象模型使用一种相对不常见的方式进行继承——称为原型——而不是Java语言中更常见的基于类的对象模型。
23.JavaScript与DOM(上)——也适用于新手 24.JavaScript与DOM(下) 25.设计模式之单例模式 26.设计模式之构造函数模式 27.设计模式之建造者模式 28.设计模式之工厂模式 29.设计模式之装饰者模式 30.设计模式之...
在咱们的第一节(深入理解javascript原型和闭包(1)——一切都是对象)中说道,函数也是一种对象。他也是属性的集合,你也可以对函数进行自定义属性。不用等咱
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现 深入理解JavaScript系列(19):求值策略 深入理解JavaScript系列(20):《你真懂JavaScript吗?》答案详解 深入理解JavaScript系列(21):S.O.L....
proto 一个基于原型的继承/类库,可以轻松创建对象和继承层次结构,而不会失去 javascript 原型系统的强大功能。为什么使用原型? proto很好用——你可以使用 proto 从任何对象继承,即使它是用不同的继承库创建的!...
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C 的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合...
2. 在使用××.prototype= {}重写原型对象的时候,一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为object。 3. 在underscore中,使用_.random(a,b)即可获得a-b中的一个随机数。 4. ...
JS是一种基于对象的语言,要实现面向对象,写法跟传统的面向对象有很大的差异。ES6引入了Class语法糖,使得JS的继承更像面向对象语言的写法。 此篇博客,分为:基本介绍、Vue使用案例 基本介绍 Class可以通过extends...
b) 实例方法:在构造函数中把原型对象中的一个属性设为函数来实现。 c) 类属性:构造函数本身的属性。 d) 类方法:用合适的函数作为构造函数本身的一个属性。 e) 子类:把原型对象赋值为父类的一个实例,默认父类为...
本章开始进入JavaScript核心知识点的高级部分——面向对象的程序设计,这一部分的内容将会对对象这一数据类型做进一步的深化理解,并且讲述几种创建对象的设计模式以及JavaScript独特的继承机制; 1.理解对象和面向...
1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 浏览器是否已启用JavaScript 16 1.11 JavaScript代码放在哪儿...
类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心。 类是对象的抽象,而对象是类的具体实例。类是抽象的,不占用内存,而对象是具体的,占用存储空间。———百度百科 早期的javascript需求...
13.4.1 JavaScript对象 202 13.4.2 Web页面控件 204 13.4.3 声音播放器 205 13.4.4 电影播放器 205 13.4.5 Flash 206 13.5 分布式对象和企业 206 13.5.1 公共对象请求代理体系结构(CORBA) 207 13.5.2 Web...