JavaScript面向对象深入理解原型
原型模式
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面向对象深入理解原型的更多相关文章
- JavaScript面向对象的理解
JavaScript面向对象的理解 笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...
- javascript javascript面向对象的理解及简单的示例
javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...
- javascript面向对象的理解(一)
第一次在园子发文: 关于js面向对象的理解: 工厂方式是什么?构造函数是什么?原形链?对象的引用? 1.对象是什么? 在js接触的比较多的就是对象了,比如: var arr = []; arr.num ...
- javascript 面向对象 new 关键字 原型链 构造函数
JavaScript面向对象JavaScript 语言使用构造函数(constructor)作为对象的模板.所谓"构造函数",就是专门用来生成实例对象的函数.它就是对象的模板,描述 ...
- JavaScript面向对象 实例与原型
JavaScript 面向对象 和 C# 不太一样,js 的对象是继承自原型的如下: 首先创建一个 js 实例 new function function f () {} 这个函数 会继承 Func ...
- javascript面向对象个人理解
1. javascript面向对象特性:抽象性,封装性,继承性: 2. js中的对象:键值对的集合:比如说{key:value} 3.抽象性:用一个对象描述一个数据,需要抽取这个对象的核心数据:两个必 ...
- javascript面向对象继承和原型
一.理解什么是对象:任何东西都可以是对象,对象就是一组无序属性的集合 对象具有属性和方法1.1 属性的类型属性内部又定义了两种属性:数据属性和访问器属性 (1)数据属性:有4个描述的行为 Config ...
- JavaScript 面向对象编程 · 理解对象
前言: 在我们深入 面向对象编程之前 ,让我们先理解一下Javascript的 对象(Object),我们可以把ECMAScript对象想象成散列表,其值无非就是一组名值对,其中值可以是数据 ...
- javaScript之深度理解原型链
经过多次的翻阅书籍终于对原型链在实际代码中的应用有了新的认识,但是不知道是否有错误的地方,还请大神多多指教. 构造函数.原型和实例的关系:每个构造函数都有一个原型对象funName.prototype ...
随机推荐
- jquery-easyUI第一篇【介绍、入门、使用常用的组件】
什么是easyUI 我们可以看官方对easyUI的介绍: easyUI就是一个在Jquery的基础上封装了一些组件-.我们在编写页面的时候,就可以直接使用这些组件-非常方便-easyUI多用于在后台的 ...
- Exception in thread "main" org.hibernate.MappingException: You may only specify a cache for root
如果出现类似下面的错误: Exception in thread "main" org.hibernate.MappingException: You may only speci ...
- 数据库复用代码【c3p0配置文件、数据库连接池】
前言 为了复用,记载一些以前写过的工具类.方法 c3p0配置文件[c3p0-config.xml] <?xml version="1.0" encoding="UT ...
- 定位页面元素之xpath详解以及定位不到测试元素的常见问题
一.定位元素的方法 id:首选的识别属性,W3C标准推荐为页面每一个元素设置一个独一无二的ID属性, 如果没有且很难找到唯一属性,解决方法:(1)找开发把id或者name加上.如果不行,解决思路可以是 ...
- Javascript-正则表达式-开发中的使用.
-- "(-1~99)之间 -1表示无限次!" pattern="^((-1)|([0-9]{0,2}))$" -- "(0~99.99)之间 的金额 ...
- JavaScript中的與和或的規則
與(&&)的規則是: 第一項的Boolean值為false,則返回第一項的值 第一項的Boolean值為true,則返回第二項的值 簡記:一假返一,一真返二 與:一假為假,全真為真 或 ...
- Redis学习笔记之一 : 配置redis
Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...
- 微信bug:建议了解,不要实验,不要手贱,不要。。。。
今天下午在群里聊天的时候,群友反应发现微信的一个bug:使用微信给好友发送‘15...............’(数字15后面加15个句号)会导致微信运行缓慢,到最后的应用未响应,退出微信. 解决办法 ...
- Vue.js的从入门到放弃进击录(一)
感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...
- JSP入门3 Servlet
需要继承类HttpServlet 服务器在获得请求的时候会先根据jsp页面生成一个java文件,然后使用jdk的编译器将此文件编译,最后运行得到的class文件处理用户的请求返回响应.如果再有请求访问 ...