• 多态
  • 封装
  • 原型模式
  • 基于原型模式的继承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. 又一个opengl教程,多多益善

    http://ogldev.atspace.co.uk/index.html http://wiki.jikexueyuan.com/project/modern-opengl-tutorial/tu ...

  2. python调用caffe环境配置

    背景是这样的,项目需要,必须将训练的模型通过C++进行调用,所以必须使用caffe或者mxnet,而caffe是用C++实现,所以有时候简单的加载一张图片然后再进行预测十分不方便 用caffe写pro ...

  3. [LeetCode&Python] Problem 784. Letter Case Permutation

    Given a string S, we can transform every letter individually to be lowercase or uppercase to create ...

  4. iproute2 与 net-tools

    https://linux.cn/article-4326-1.html https://blog.csdn.net/astrotycoon/article/details/52317288 如今很多 ...

  5. iphone上点击div会出现半透明灰色背景以及margin失效

    -webkit-tap-highlight-color         这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现 ...

  6. (19)模型层 -ORM之msql 跨表查询(正向和反向查询)

    基于对象的跨表查询 基于对象的跨表查询'''正向和反向查询'''# 正向 ----> 关联字段在当前表中,从当前表向外查叫正向# 反向 ---> 关联字段不在当前表中,当当前表向外查叫反向 ...

  7. Java和C++的区别杂记

    1.java中的作用域描述符(类比于C++是通过"."来实现,Java中"类名.静态成员名",C++中"类名::静态成员名" 2.java中 ...

  8. tile38 server 密码保护

    默认tile38 是没有密码保护的,我们可以通过配置指定密码,类似redis 的,但是redis 的一般我们是配置在 配置文件中的 环境准备 docker-compose 文件   version: ...

  9. drone 1.0 新功能试用以及说明

    drone 1.0 rc 已经发布,新的功能很强大,界面比旧版本更加人性化,和git 的集成也更高了 测试环境准备 试用gogs 做为git 管理工具 docker-compose 文件 versio ...

  10. FastAdmin 后台前端后端组件说明(待续)

    FastAdmin 后台 后端 ThinkPHP 5 fastadmin-addons 待续…… 前端 Bootstrap AdminLTE 二次开发 RequireJS JS 模块管理 Less 样 ...