1 为什么要使用原型?

 /*
* javascript当中 原型 prototype 对象
*
* */
//首先引入 prototype的意义,为什么要使用这个对象 //先来写一个构造函数的面向对象实例
function Person(name ){
this.name = name;
this.show = function(){
return this.name;
};
}
//实例化两个对象
p1 = new Person("a");
p2 = new Person("b");
//alert(p1 == p2); // false 很显然两个实例对象不是一个对象
//alert(p1.show == p2.show); // false 实际上每一个对象实例化的时候都各自拥有自己的这个方法 /*
* 实际上,上面的例子,对于show函数来说,其实每一个Person的对象,都拥有这个方法,并且功能是一样的,这其实是占用内存的,重复累赘的
* 如果可以更好的 话,一个面向对象过程,相同的属性和方法,最好还是能所有对象拥有同一份公共相同方法和属性,
*
*
* 在js当中这就需要引入原型的概念:
* 在js中,每一个函数都有一个属性prototype 是一个指向自己的原型对象的引用。
* 原型对象是一个对象, 如果我们把希望共有的方法和属性写入原型对象当中,就能实现,在每一个实例化对象不新建一个方法和属性,
* 而是使用原型对象的提供的方法和属性
*
* */ //这是一个类
function Person(){ }
//下面我们向这个Person类的原型对象里面添加属性和方法
Person.prototype.name = "张三";
Person.prototype.show = function(){
return this.name;
}; //实例化两个Person的对象
var p1 = new Person();
var p2 = new Person();
//alert(p1.name); //张三
//alert(p1.name == p2.name); //true 加入原型对象的属性就变成了公共属性,所有对象拥有相同一份
//这个时候我们给p1 增加自己的变量 覆盖name
p1.name = "李四";
//alert(p1.show()); //李四 这个name变量实际上没有覆盖原型类当中,而是p1对象自己的成员变量
//这个时候把p1的name删除,再取p1的name,就又会取到原型对象的name
delete p1.name;
//alert(p1.show()); //张三 这个时候,自己没有成员变量name , 就会使用原型对象中共有的name //alert(p1.show == p2.show); // true 这两个实例对象都没有实现show 这个show是原型类提供的 /*
* 经过上面的分析 再来整理一下 原型对象:
*
* 1 任何一个函数 他的prototype属性都是一个指向自己原型对象的引用
* 2 某个函数实例在调用方法或者取属性的时候,先找自己的成员变量,如果没有再找自己的原型对象中的共有变量
* 3 相同构造函数出来的所有实例对象的protorype 指向的原型 都和构造函数的原型是同一个原型对象
* 4 写入原型中的方法和属性是共有的,如果实例对象重写,会添加私有变量 不会覆盖原型中的内容
* 5 原型对象的构造器指向的就是拥有这个原型的初始的构造函数。
*
* */

2 构造函数 实例对象 和原型对象的关系

 /*
JavaScript中 构造函数、实例对象、原型之间的关系:
构造函数内的变量和方法,每一个实例对象初始化的时候都会为自己实例化这些属性方法
构造函数的prototype属性,是一个引用,指向他的原型对象
构造函数实例化出来的所有对象和构造函数共有一个原型对象,他们的prototype都指向同一个原型
原型对象中的属性方法是构造函数和实例对象共有的,实例对象初始化不会为自己创建这些属性和方法。
当调用实例对象的属性的时候,会有限找自己的私有变量,没有的话就去找原型对象的变量,再没有就返回undefined */
//一个构造函数
function Person(){ }
//Person的原型对象 设置公共属性和方法
Person.prototype.name="haha";
Person.prototype.age=18;
Person.prototype.sayName = function(){
alert(this.name);
}; // 实例化对象
var p1 = new Person();
alert(p1.name); //haha 这里会找到原型对象中的公共属性 //利用Object.getPrototypeOf(obj) 能够取得obj的原型对象
alert(Person.prototype == Object.getPrototypeOf(p1)); //true 构造函数实例化的对象他们之间共有一个原型对象 /*
当调用对象属性的时候
先搜索自己的私有属性
如果没有 再搜索原型对象的属性
如果没有 返回undefined 对象设置私有属性不会修改原型内容,只会自己添加属性
*/
//实例化另一个对象
var p2 = new Person();
//给p2添加私有属性
p2.name = "xixi";
alert(p2.name); //xixi
delete p2.name;
alert(p2.name); //haha // 检查一个对象的属性是不是自己的 hasOwnProperty()
p2.name = "xixi";
alert(p2.name); //xixi
alert(p2.hasOwnProperty("name")); //true
delete p2.name;
alert(p2.name); //haha
alert(p2.hasOwnProperty("name")); //false // in 操作符 返回 属性是否在对象中或者在原型中
alert( "name" in p2 ); //true // 结合in和hasOwnProperty 判断 属性是不是原型的属性
function isPrototypeProperty( obj , property ){
// 不是自己的私有属性并且是自己的属性
return !obj.hasOwnProperty(property) && property in obj;
} //Object.keys(obj) 返回obj对象中能够被枚举的私有属性的数组 constructor 是不能被枚举的
p2.name = "xixi";
p2.age=10;
alert(Object.keys(p2)); // name,age
alert(Object.keys(Person.prototype)); //name,age,sayName // Object.getOwnPropertyNames(obj) 返回obj所有属性的数组
alert(Object.getOwnPropertyNames(Person.prototype)); // name,age,sayName,constructor

JavaScript中的 原型 property 构造函数 和实例对象之间的关系的更多相关文章

  1. js高级——构造函数,实例对象和原型对象——prototype、__proto__和constructor构造器

    一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...

  2. JavaScript中通过原型添加方法,解决数据共享问题,节省内存空间

    涉及知识点:(1)原型的引入(2)构造函数.原型对象和实例对象之间的关系(3)__proto__和prototype的理解 直接举例:在自定义构造函数创建对象时,因为创建的对象使用的不是同一个方法,所 ...

  3. javascript中的原型和原型链(二)

    原型(prototype) 函数的 prototype 属性(图) 每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为:原型对象) 原型对象中有一个属性construct ...

  4. javascript的构造函数和实例对象、prototype和__proto__的区别,原型对象及构造器的理解

    一.前言 我们先通过代码来分别打印出实例对象.构造函数,以及修改了原型对象的构造函数,通过对比内部结构来看看他们之间的区别. //定义构造函数 function Person(name, age){ ...

  5. Javascript原型、构造函数、实例的关系

    1. 原型.构造函数.实例的关系 原型: 原型通过constructor指向构造函数,原型如果是自定义对象且没有明确将constructor指向构造函数,则原型的constructor指向函数的基类F ...

  6. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  7. javascript中的原型继承

    在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...

  8. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

  9. 前端知识体系:JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则

    理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...

随机推荐

  1. WordPress文章页添加展开/收缩功能

    很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

  2. 【Unity3D与23种设计模式】工厂方法模式(Factory Method)

    GoF中定义: "定义一个可以产生对象的接口,但是让子类决定要产生哪一个类的对象.工厂方法模式让类的实例化程序延迟到子类中实施" 当类的对象产生时,若出现下列情况: 1.需要复杂的 ...

  3. 如何写出如散文般的代码――《代码整洁之道》读书笔记(Ch1-Ch3)

    不知道有多少人像我一样,程序出现问题时添加函数添加变量解决,变量名用a,b,c等"简单"的字母来表示.不知道有多少人像我一样,看完自己的代码,心里暗骂"什么玩意儿!&qu ...

  4. Python基础-week02

    本节内容摘要:http://www.cnblogs.com/Jame-mei 0.xmind8破解及安装(想要破解版及资料请下方留言,这里不做具体说明) 1.模块初识 2.pyc是什么? 3.pyth ...

  5. Mycat 分片规则详解--范围分片

    实现方式:切分规则根据文件(autopartition-long.txt)配置的范围来进行切片,制定基准列的取值范围,然后把这一范围的所有数据都放到一个DN上面 优点:适用于整体数量可知或总数量为固定 ...

  6. 笔记:MyBatis XML配置-typeAliases 内建别名表

    别名 映射的类型 _byte byte _long long _short short _int int _integer int _double double _float float _boole ...

  7. 关于java中的值传递与引用传递遇到的问题

    来源于:https://www.nowcoder.com/test/question/done?tid=14302398&qid=25373#summary 下列java程序的输出结果为___ ...

  8. 网络通信 --> IO多路复用之select、poll、epoll详解

    IO多路复用之select.poll.epoll详解      目前支持I/O多路复用的系统调用有 select,pselect,poll,epoll,I/O多路复用就是通过一种机制,一个进程可以监视 ...

  9. Java多线程:线程池

    一. 背景 线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池可以对线程进行统一的分配.调优和监控,并有以下好处:     第一:降低资源消耗.通过重复利用已 ...

  10. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...