• 多态
  • 封装
  • 原型模式
  • 基于原型模式的继承javascript对象

1.多态

多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。换句话说,给不同的对象发哦少年宫同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈。 多态最根本的作用就是吧通过过程化的条件分子语句转换为对象的多态性,从而消除这些条件分支语句。

var googleMap = {
show:function(){
console.log("开始渲染Google地图");
}
};
var baiduMap={
show :function () {
console.log('开始渲染百度地图');
}
};
//如果要添加一个搜搜地图
var sosoMap={
show:function(){
console.log('开始渲染搜搜地图');
}
} var renderMap = function(map){
if(map.show instanceof Function){
map.show();
}
}
renderMap(googleMap); renderMap(sosoMap);

2.封装

封装的目的是将信息隐藏,封装应该被视为“任何形式的封装”,也就是说,封装不仅仅是隐藏数据,还包括隐藏实现细节,设计细节以及隐藏对象类型等。

var myObject = (function(){
var _name = 'SarmTom'; //私有成员变量
return { //公开public方法
getName:function(){
return _name;
}
};
})
 

我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的原型对象。使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中

function Person(){};
Person.prototype.name = 'SmarTom';
Person.prototype.age = 29;
Person.prototype.job = "Soft Engineer";
Person.prototype.syaName=function(){
console.log(this.name);
}
var a = new Person();
a.syaName();

使用克隆原型的模式

var Plane = function(){
this.blood = 100;
this.attackLevel = 1;
this.defenseLevel = 1;
}
var plan = new Plan();
plan.blood = 500;
plane.attackLevel = 10;
plane.defenseLevel = 7; var clonePlan = Object.create(plane);
console.log(clonePlan); //输出:Object{blood:500,atackLevel:10,defenseLevel:7}
//在不支持Object.create方法的浏览器中,则可以使用一下代码
/*
Object.create = Object.create || function(object){
var F = function(){};
F.prototype = obj;
return new F();
}
*/

3.JavaScript中的原型继承

  • 所有的数据都是对象。
  • 要得到一个对象,不是通过实例化,而是找到一个对象原型并克隆它。
  • 对象会记住它的原型。
  • 如果对象无法响应某个请求,它会把这个请求委托给自己的原型。
1.所有数据都是对象

JavaScript除了undefined之外,一切都是对象,为了 实现
这个目标,number,boolean,string,这几种基本类型数据
也可以通过“包装类”的方式编程对象类型的数据处理。 事实上,javascript中的跟对象Object.prototype对象。Object.prototype对象是一个空的对象。
我们再JavaScript中遇到的每一个对象,实际上都是从Object.prototype对象克隆出来的,
Object.prototype对象就是它们的原型。比如

 

var obj1 = new Object();
var obj2 = {};

2.要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它。
function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
} var a = new Person('SmarTom'); console.log(a.name); //SmarTom
console.log(a.getName()); //SmarTom
console.log(Object.getPrototypeOf(a)==Person.prototype); //true
在JavaScript中没有类的概念,在这里Person并不是类,而是函数构造器,JavaScript函数既可以作为普通函数被调用,也可以作为构造器被调用。
当使用new运算符来调用函数时,此时的函数就是一个构造器。
用new运算符来创建对象的过程,实际上也只是先克隆Object.prototype对象,在进行一些其它操作的过程。
3.对象会记住它的原型
JavaScript给对象提供了一个名为__proto__的隐藏属性,某个属性的__proto__属性会指向它的构造器的原型对象,即{Constuctor}.prototype。
var a = new Object();
console.log(a.__proto__ ===Object.prototype); //结果为true
 4.如果对象无法响应某个请求,它会把这个请求委托给它的构造器的原型
var obj = {name:'SmarTom'};
var A = function(){};
A.prototype = obj;
var a = new A();
console.log(a.name);

我们来看这段代码解释器做了哪些事情:

  • 首先,尝试遍历执行a中的所有属性,但没有找到name这个属性
  • 查找name属性的这个请求被委托给对象a的构造器的原型,它被a.__proto__记录着并且指向A.prototype,而A.prototype被设置成为对象Obj;
  • 在对象obj中查找到了name属性,并返回它的值。
var A = function(){};
A.prototype = {name:"SmarTom"}; var B = function(){};
B.prototype = new A(); var b = new B();
console.log(b.name); //输出SmarTom

在看这段代码执行的时候,引擎做了那些事情

  • 首先,尝试遍历b中的属性,但没有找到name这个属性。
  • 查找name属性的请求被委托给对象B的构造器的原型,它被b.__proto__记录着并且指向B.prototype,而B。prototype被设置为一个通过new A()创建的对象。
  • 在该对象中依然没有找到name属性,于是请求被继续委托给这个对象构造器的原型A.prototype。
  • 在A.prototype中找到了name属性,并返回它。

最后还要留意一点,原型链并不是无限长的。现在我们尝试访问对象a的address属性。对象b和它的构造器原型上没有address属性,那么这个请求最终会被返回为undefined。

《JavaScript设计模式与开发》笔记 1.面向对象的JavaScript的更多相关文章

  1. 《JavaScript设计模式与开发实践》-面向对象的JavaScript

    设计模式 面向对象 动态类型语言 编程语言按照数据类型大体分为:静态类型语言和动态类型语言. 静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行时,待变量被赋予某个值之后,才 ...

  2. 《JavaScript设计模式与开发实践》读书笔记-基础知识

    笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...

  3. 《Javascript设计模式与开发实践》--读书笔记

    第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...

  4. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  5. 《javascript设计模式与开发实践》--- (单一职责原则)

    看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...

  6. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  7. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  8. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  9. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  10. 《JavaScript设计模式与开发实践》笔记第一章

    第一章 面向对象的JavaScript 动态类型语言和鸭子类型 编程语言按照数据类型大体可以分为两类:静态类型语言.动态类型语言. 静态类型语言:在编译时便已确定变量的类型. 优点: 在编译时就能发现 ...

随机推荐

  1. hadoop day 4

    1.自定义的一种数据类型,要在hadoop的各个节点之间传输,应该遵循hadoop的序列化机制 就必须实现hadoop相应的序列化接口Writable 实现的方法包括:write(),readFiel ...

  2. 位图(bitmap)—— C语言实现

    高级数据结构及应用 -- 使用 bitmap 进行字符串去重 位图应当具备的置一,清零,以及判断三大功能: #define BITS_PER_WORD 32 #define MASK 0x1f #de ...

  3. C 语言经典面试题 —— 宏

    1. 运算符优先级与括号 #define Cube(a) a*a*a 无法解决 Cube(1+1) ⇒ 1+1*1+1*1+1 ⇒ 4,期待的应当是 8,故将其改造为 #define Cube(a) ...

  4. Threejs着色器基本使用样例改造

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - bu ...

  5. 一些Go操作Kafka的问题

    1)包的选择 confluent-kafka-go使用了rdkafka的c库,破坏了go代码的收敛,不使用: sarama不支持groud id 的功能,写consumer需要自己管理消费的parti ...

  6. Buildroot Savedefconfig

    /********************************************************************************* * Buildroot Saved ...

  7. HashMap<Integer, Bean> 根据Bean的属性进行排序

    转载地址 已知一个HashMap<Integer,User>集合, User有name(String)和age(int)属性.请写一个方法实现对HashMap的排序功能,该方法接收Hash ...

  8. Nginx:承受3万并发连接数,胜过Apache 10倍

    编者按:Nginx是目前比较重要的开源性负载均衡技术,新浪.网易.六间房等很多网站都将Nginx部署进自己的网站系统架构,并解决部分问题.本文是作者长期的实战经验,很有参考价值. 本文是我撰写的关于搭 ...

  9. MySQL在登陆时出现ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)错误

    错误显示:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 解决方案: 1.找到配 ...

  10. Djangon 基础总结 汇总 从请求到返回页面的过程,

    第一步我是用户 现在 浏览器上输入地址 ---> 发送给服务   来请求返回当前的页面 第二步  服务端获得我当前的客户端要求访问的地址   第三步 服务端去urls.py中去,来看是要访问那个 ...