原型模式

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. 201521123054 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步访问(请出现相关代码)? 使用Lock对象和Condition对象实现互斥 ...

  2. android动画的实现过程

    先上自己的测试代码,有参考apidemo中的AnimationDrawable中的方法 public class AnimateActivity extends Activity { @Overrid ...

  3. ②jquery复习

    # jQuery 复习--by 传智前端与移动开发学院 ## 1. jQuery是什么?(了解)+ www.github.com+ jQuery 其实就是一堆的js函数,是普通的js,只不过应用广泛, ...

  4. 西邮linux兴趣小组2014纳新免试题(三)

    [第三关] 题目 http://sortsth.sinaapp.com/ 分析 查看网页源码,得知题目让找出6种排序算法,每次刷新或提交序列都变化. 15种算法清单: CountingSort     ...

  5. [err] 1055

    本人mysql安装在ubuntu16.04上,mysql版本是5.7.19:在创建表和插入数据时报了 [Err] 1055 - Expression #1 of ORDER BY clause is ...

  6. css左右布局的几种实现方式和优缺点

    记录一下左右布局的实现方式,实现的具体效果是,左侧固定宽度,高度适中等于父元素的高度,父元素的高度由右侧内容决定: html代码如下: <div class="parent" ...

  7. hdu2222 ac自动机入门

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. windows 2008 R2 断电重启进入修复模式

    windows 2008 R2 意外断电重启进入修复模式 现在出现一个问题,就是当机房停电的时候,计算机自动进入到修复模式,当人不在机房的时候,容易造成服务器无法访问,我相信正常启动应该没什么问题吧, ...

  9. Hadoop就是一个别人造好的轮子

    这个想法源自于我看了<Hadoop: The Definitive Guide>的Part I Ch 2中MapReduce的引入和介绍,书中先说了怎么通过原始的办法处理数据,然后引入到如 ...

  10. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...