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 ...
随机推荐
- logback:logback和slf4j中的:appender、logger、encoder、layout
(1)appender 1.appender标签是logback配置文件中重要的组件之一.在logback配置文件中使用appender标签进行定义.可 以包含0个或多个appender标签. 2.a ...
- js中判断undefined类型
typeof 运算符返回一个用来表示表达式的数据类型的字符串.可能的字符串有:"number"."string"."boolean".&qu ...
- elasticsearch 中文分词、插件的安装和使用(一)
1. 安装elasticsearch.kibana.x-pack #安装elasticsearch wget https://artifacts.elastic.co/downloads/elasti ...
- ajax 发送json 后台接收 遍历保存进数据库
前台怎么拿参数的我就不管了我也不会 反正用这个ajax没错 ajax 代码 一定要写明http请求类型 { contentType:"application/x-www-form-ur ...
- leetCode没那么难啦 in Java (二)
介绍 本篇介绍的是标记元素的使用,很多需要找到正确元素都可以将正确元素应该插入的位置单独放置一个标记来记录,这样可以达到原地排序的效果. Start 27.RemoveElement 删除指定元 ...
- cnblog排版
记录一些自己写博客中的排版技巧 一.标题 红色部分代码用在标题的CSS样式中 <p style="background: gray; font-size: 18px; font-fam ...
- 程序员 各种PDF格式电子书--免费网盘资源
Java <设计模式之禅(完整高清版)> 链接:http://pan.baidu.com/s/1bo7noMb 密码:5kve <重构_改善既有代码的设计> 链接:http: ...
- 数据处理:12个使得效率倍增的pandas技巧
数据处理:12个使得效率倍增的pandas技巧 1. 背景描述 Python正迅速成为数据科学家偏爱的语言,这合情合理.它拥有作为一种编程语言广阔的生态环境以及众多优秀的科学计算库.如果你刚开始学习P ...
- Java面向对象 Object类 内部类
Java面向对象 Object类 内部类 知识概要: 一:Object类 二:内部类 匿名内部类的写法 1.Object O ...
- EasyUI ComboTree无限层级异步加载示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...