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. 关于“应用程序无法启动,因为应用程序的并行配置不正确。请参阅应用程序事件日志,或使用命令行sxstrace.exe工具”问题的解决方法

    今天打开QQ管家加速版的时候突然出现了这个错误,百度了下说是系统缺少Microsoft Visual C++ 20XX(运行库),下载这个安装即可解决问题.

  2. Unity服务端链接MySQL数据库

    链接数据库,可以分为以下几个流程: 链接MySQL(数据库地址.端口.用户名.密码) 选择数据库 执行sql语句 关闭数据库 转换为代码如下: using System; using MySql.Da ...

  3. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  4. tcpdump抓包工具的使用

    个人原创,转载请注明,否则依法追究法律责任 2018-02-28  16:01:26 tcpdump 倾倒网络传输数据,直接启动tcpdump将监视第一个网络接口上所有流过的数据包. 1 不接任何参数 ...

  5. python全栈开发-Day5 集合

    python全栈开发-Day5 集合 一.首先按照以下几个点展开对集合的学习 #一:基本使用 1 .用途 2 .定义方式 3 .常用操作+内置的方法 #二:该类型总结 1. 存一个值or存多个值 只能 ...

  6. 【吐槽向】iOS 中的仿射变换

    什么是仿射变换矩阵 CGAffineTransform 实际上就是一个用于绘制 2D 图形的的仿射变换矩阵.仿射变换矩阵用于旋转.缩放.平移.扭曲(skew)在图形上下文中绘制的对象.CGAffine ...

  7. [Tarjan 学习笔记](无向图)

    今天考试因为不会敲 Dcc 的板子导致没有AK(还不是你太菜了),所以特地写一篇博客记录 Tarjan 的各种算法 无向图的割点与桥 (各种定义跳过) 割边判定法则 无向边 (x,y) 是桥,当且仅当 ...

  8. 大数据 --> CAP原理和最终一致性

    CAP原理和最终一致性 CAP原理和最终一致性(Eventually Consistency)

  9. ElasticSearch的安装

    一.安装javaSE环境(已配java环境变量的请直接跳过) 1.从Java JDK 官网下载适合自己的jdk版本.(我自己用的jdk1.7) 2.安装jdk后,配置java环境变量(ps:比较喜欢简 ...

  10. ASP.NET Core MVC 2.1 顶级参数验证

    本文讨论ASP.NET Core 2.1中与ASP.NET Core MVC / Web API控制器中的模型绑定相关的功能.虽说这是一个功能,但从我的角度来看,它更像是一个错误修复! 请注意,我使用 ...