原型模式

function Person(){
}
Person.prototype.name="Ewarm";
Person.prototype.age="29";
Person.prototype.job="software Engineer";
Person.prototype.sayName=function(){
alert(this.name);
}
var person1=new Person()
//我们可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系,即实例.__proto__是否指向构造函数的原型对象,如果指向那么这个方法返回为ture。
alert(Person.prototype.isPrototypeOf(person1))//true
//ECMAScript5增加了一个新方法 Object.getPrototypeOf() 这个方法返回的是实例.__proto__的值,即构造函数原型对象 alert(Object.getPrototypeOf(person1)==Person.prototype)//true 返回实例.__proto__的值
alert(Object.getPrototypeOf(person1).name) //Ewarm

  

//细心的你们会发现这样每次都是Person.prototype.属性真的好麻烦于是我们出现下面这种

 更简单的原型语法

function Person(){

}
Person.prototype={
name:"Ewarm",
age:25,
job:"software engineer",
sayName:function(){
alert(this.name)
} }
//注意这里虽然和之前的最终结果相同 但是这里的constructor属性不再指向Person了 原因:每建一个函数,就会同时创建它的prototype对象,这个对象也会自动获得constructor属性,此时通过constructor已经无法确定对象类型了
var person=new Person()
alert(person instanceof Object )//ture
alert(person instanceof Person)//ture
alert(person.constructor==Person)//false
alert(person.constructor==Object)//true

  

//但是我们可以通过以下方法来修正constructor

function(){
}
Person.prototype={
constructor:Person,//相当于复写
name:"Ewarm",
age:25,
job:"software engineer",
sayName:function(){
alert(this.name)
}
}

//这样虽然修正了但是,constructor的enmurable属性会变为true 即可枚举 如果要设置回去 可以使用Object.defineProperty(),只适用于ECMAScript5兼容器的浏览器

原型的动态性

function Person(){
}
var person=new Person()
Person.prototype={
constructor:Person,//相当于复写
name:"Ewarm",
age:25,
job:"software engineer",
sayName:function(){
alert(this.name)
}
}
person.sayName()//error

//报错的原因:重写原型对象切断了现有原型与任何之前已经存在的实例之间的联系,他们引用的仍然是最初的原型

function Person(){}
var person1=new Person()
Person.prototype.sayHi=function(){
alert("hi")
}
person1.sayHi()//hi
//这里相当于添加方法而非重写  

 往原生对象添加方法

String.prototype.Ewarm=function(text){
return this.indexOf(text)==0//找到为0
}
var message="hello Ewarm"
alert(message.Ewarm("hello"))//true 

 原型的问题
//共享所带来的问题 尤其是针对引用类型值的属性

function Person(){}
Person.prototype={
constructor:Person,
name:"Ewarm",
age:25,
job:"software engineer",
friends:["cch","emon"],
sayName:function(){
alert(this.name)
}
}
var person1=new Person()
var person2=new Person()
person1.friends.push("tea")
alert(person1.friends)//"cch","emon","tea"
alert(person2.friends)//"cch","emon","tea"
alert(person1.friends==person2.friends)//true
//组合使用构造函数模式和原型模式可以解决这个问题

 如果看不懂 建议挨个敲一遍哦~ 这样更容易理解 

JavaScript面向对象深入理解原型的更多相关文章

  1. JavaScript面向对象的理解

    JavaScript面向对象的理解  笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...

  2. javascript javascript面向对象的理解及简单的示例

    javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...

  3. javascript面向对象的理解(一)

    第一次在园子发文: 关于js面向对象的理解: 工厂方式是什么?构造函数是什么?原形链?对象的引用? 1.对象是什么? 在js接触的比较多的就是对象了,比如: var arr = []; arr.num ...

  4. javascript 面向对象 new 关键字 原型链 构造函数

    JavaScript面向对象JavaScript 语言使用构造函数(constructor)作为对象的模板.所谓"构造函数",就是专门用来生成实例对象的函数.它就是对象的模板,描述 ...

  5. JavaScript面向对象 实例与原型

    JavaScript 面向对象 和 C# 不太一样,js 的对象是继承自原型的如下: 首先创建一个 js 实例 new  function function f () {} 这个函数 会继承 Func ...

  6. javascript面向对象个人理解

    1. javascript面向对象特性:抽象性,封装性,继承性: 2. js中的对象:键值对的集合:比如说{key:value} 3.抽象性:用一个对象描述一个数据,需要抽取这个对象的核心数据:两个必 ...

  7. javascript面向对象继承和原型

    一.理解什么是对象:任何东西都可以是对象,对象就是一组无序属性的集合 对象具有属性和方法1.1 属性的类型属性内部又定义了两种属性:数据属性和访问器属性 (1)数据属性:有4个描述的行为 Config ...

  8. JavaScript 面向对象编程 · 理解对象

    前言:      在我们深入 面向对象编程之前 ,让我们先理解一下Javascript的 对象(Object),我们可以把ECMAScript对象想象成散列表,其值无非就是一组名值对,其中值可以是数据 ...

  9. javaScript之深度理解原型链

    经过多次的翻阅书籍终于对原型链在实际代码中的应用有了新的认识,但是不知道是否有错误的地方,还请大神多多指教. 构造函数.原型和实例的关系:每个构造函数都有一个原型对象funName.prototype ...

随机推荐

  1. 201521123110 java课程设计

    一.需求分析 功能要求:计算机产生随机数,猜中即胜,猜不中,提示是大了还是小了,继续猜,直至猜到,给出所用时间和评语.保留用户测试成绩,做出成绩排行榜.排行榜存放到文件中. 二.本组课题及本人任务 • ...

  2. 201521123079《java程序设计》第13周学习总结

    1. 本周学习总结 1.以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. (1)netassist可以用来链接IP端口 (2)accept方法可以用来监听端口,当没有客户端连接 ...

  3. SSH第一篇【整合SSH步骤、OpenSessionInView】

    前言 到目前为止,Struts2.Hibernate.Spring框架都过了一遍了.也写过了Spring怎么与Struts2整合,Spring与Hibernate整合-本博文主要讲解SSH的整合 整合 ...

  4. 关于maven项目的一些报错问题

    本文为自己记录的笔记略显粗糙后续会把遇到的问题追加进来.忘大神多指点 1.父工程红色感叹号 此类问题解决方法,一般打开pom文件查看红色标记处是否有报错,也就是看哪个jar包没有下下来.分为两种情况. ...

  5. <c:forEach>+<c:if>

    <c:forEach>:用来做循环<c:if>:相当于if语句用于判断执行,如果表达式的值为 true 则执行其主体内容. <c:forEach var="每个 ...

  6. oracle 权限

    一.介绍这一部分我们主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里.当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必须为其授予系统的权限: ...

  7. InnoDB Undo Log

    简介 Undo Log包含了一系列在一个单独的事务中会产生的所有Undo Log记录.每一个Undo Log记录包含了如何undo事务对某一行修改的必要信息.InnoDB使用Undo Log来进行事务 ...

  8. 详解MySQL基准测试和sysbench工具

    前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...

  9. JPEG流封装AVI视频

    前言:前几天工作任务,要把JPEG流封装为AVI视频,就找了些AVI文件结构资料和示例代码研究了下,现将学习总结及最终完成的可用代码分享出来,由于本人也是现学现用,如有不恰当或错误之处,欢迎提出! 1 ...

  10. SpringMVC学习笔记(二)

    一.导航 复杂类型的参数绑定 校验 异常处理 图片上传 json交互 拦截器 二.复杂类型参数绑定 ①.包装类型的pojo参数绑定 使用场景:实现商品查询条件传入. 实现方法:>通过添加Http ...