针对基础知识的每一个小点,我都写了一些小例子,https://github.com/huyanluanyu1989/DesignPatterns.git,便于大家理解,如有疑问,大家可留言给我,最近工作比较忙,可能更新会比较慢,大家多我原谅,有兴趣可以关注一下,后续我会尽快更新的,谢谢大家支持!!!

第一部分 基础知识

第1章 面向对象的JavaScript

1.1 动态类型语言和鸭子类型

  编程语言按照数据类型大体可以分为两类,一类是静态类型语言,另一类是动态类型语言。

  静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行的时候,待变量被赋予某个值之后,才会具有某种类型。

   鸭子类型(duck typing)的通俗说法是:“如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子。

  

<script type="text/javascript">
var duck = {
duckSinging : function(){
console.log('嘎嘎嘎');
}
}
var chicken = {
duckSinging : function(){
console.log('嘎嘎嘎');
}
} var choir = [];
var joinchoir = function(animal){
if(animal && typeof(animal.duckSinging) === 'function'){
choir.push(animal);
console.log('恭喜加入合唱团');
console.log(choir.length);
}
}
joinchoir(duck);
joinchoir(chicken);
</script>

1.2 多态

  多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈。

  多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来,也就是将“不变的事物”与 “可能改变的事物”分离开来。把不变的部分隔离出来,把可变的部分封装起来。

  

<script type="text/javascript">
var makeSound = function (animal){
if(animal instanceof duck){
console.log("嘎嘎嘎");
}else if(animal instanceof chicken){
console.log("咯咯咯");
}
}
var duck = function(){};
var chicken = function(){};
makeSound(new duck);
makeSound(new chicken);
</script>

1.3 封装

  封装的目的是将信息隐藏。

  封装数据:JavaScript只能依赖变量的作用域来实现封装特性,而且只能模拟出 public 和 private 这两种封装性。

  封装类型:是通过抽象类和接口来进行的。

  封装变化:通过封装变化的方式,把系统中稳定不变的部分和容易变化的部分隔离开来,在系统的演变过程中,我们只需要替换那些容易变化的部分。

  

<script type="text/javascript">
var goolgeMap = {
show:function(){
console.log("谷歌地图")
}
}
var baiduMap = {
show:function(){
console.log("百度地图");
}
}
var renderMap = function(map){
if(map.show instanceof Function){
map.show();
}
}
renderMap(goolgeMap);
renderMap(baiduMap);
</script>

1.4 原型模式和基于原型继承的 JavaScript 对象系统

 原型编程范型至少包括以下基本规则:

 1. 所有的数据都是对象。

  JavaScript在设计的时候,模仿 Java 引入了两套类型机制:基本类型和对象类型。基本类型:undefined、number、boolean、string、function、object。除了 undefined 之外,一切都应是对象。

  JavaScript 中的根对象是 Object.prototype 对象。Object.prototype 对象就是它们的原型。

  

<script type="text/javascript">
var Plane = function(){
this.blood = 100;
this.attackLevel = 1;
this.defenseLevel = 1;
}
var plane = new Plane();
plane.blood=500;
plane.attackLevel=10;
plane.defenseLevel=7; var clonePlane = Object.create(plane);
console.log(clonePlane)
</script>

 2.要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它。

<script type="text/javascript">
function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
} var objectFactory = function(){
var obj = new Object(); // 从 Object.prototype 上克隆一个空的对象
Construtor = [].shift.call(arguments);// 取得外部传入的构造器,此例是 Person
obj.__proto__ = Construtor.prototype;// 指向正确的原型
var ret = Construtor.apply(obj, arguments);// 借用外部传入的构造器给 obj 设置属性
return typeof ret === 'object' ? ret : obj ;// 确保构造器总是会返回一个对象
} var a = objectFactory(Person, 'sven');
// var a = new Person('Remen')
console.log(a.name);
console.log(a.getName());
console.log(Object.getPrototypeOf(a) === Person.prototype);
</script>

 3.对象会记住它的原型。

  对象把请求委托给它的构造器的原型。  

 4. 如果对象无法响应某个请求,它会把这个请求委托给它自己的原型。

  在 JavaScript 中,每个对象都是从 Object.prototype 对象克隆而来的,只能得到单一的继承关系,即每个对象都继承自 Object.prototype 对象,

 在原型继承方面 ,JavaScript也同样遵守这些原型编程的基本规则。

<script>
//一个类继承自另一个类时
var A = function(){};
A.prototype = {name : 'sven'}; var B = function(){};
B.prototype = new A(); var b = new B();
var a = new A();
console.log(b.name) </script>

  

第1章 面向对象的JavaScript的更多相关文章

  1. javascript高级程序设计第3版——第6章 面向对象的程序设计

    第六章——面向对象的程序设计 这一章主要讲述了:面向对象的语言由于没有类/接口情况下工作的几种模式以及面向对象语言的继承: 模式:工厂模式,构造函数模式,原型模式 继承:原型式继承,寄生式继承,以及寄 ...

  2. 前端开发:面向对象与javascript中的面向对象实现(一)

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  3. 第十一章 前端开发-JavaScript

    第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...

  4. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  5. 面向对象的 JavaScript

    面向对象的javascript 一.创建对象 创建对象的几种方式: var obj = {}; var obj = new Object(); var obj = Object.create(fath ...

  6. Java基础知识二次学习--第三章 面向对象

    第三章 面向对象   时间:2017年4月24日17:51:37~2017年4月25日13:52:34 章节:03章_01节 03章_02节 视频长度:30:11 + 21:44 内容:面向对象设计思 ...

  7. 摘抄--全面理解面向对象的 JavaScript

    全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...

  8. 零基础学Python--------第7章 面向对象程序设计

    第7章 面向对象程序设计 7.1 面向对象概述 面向对象(Object Oriented)的英文缩写是OO,它是一种设计思想.从20世纪60年代提出面向对象的概念到现在,它已经发展成为一种比较成熟的编 ...

  9. 《码出高效 Java开发手册》第二章 面向对象

    码云地址: https://gitee.com/forxiaoming/JavaBaseCode/tree/master/EasyCoding 第2章 面向对象 Object-Oriented Pro ...

随机推荐

  1. iOS:如何让xib同时兼容支持iOS6和iOS7

    做法如下: 1. 取消xib的Use Autolayout属性的勾选: 2. 将xib中每一个子控件(没错,每一个控件,包括UIButton.UILabel等等),将它们的Y Frame的值全部增加2 ...

  2. find -perm命令

    http://www.2cto.com/os/201205/130125.html find -perm,根据文件的权限来查找文件,有三种形式: find -perm mode find -perm ...

  3. 关于Android开发数据存储的方式(一)

    关于Android开发数据存储方式(一) 在厦门做Android开发也有两个月了,快情人节了.我还在弄代码. 在微信平台上开发自己的APP,用到了数据存储的知识,如今总结一下: 整体的来讲.数据存储方 ...

  4. 如何将hyper-v虚拟机转换成vmware的虚拟机- 转换SharePoint 2010 Information Worker Demonstration and Evaluation Virtual Machine (SP1)

    官方有一个用于SharePoint的demo用的虚拟机: 2010 Information Worker Demonstration and Evaluation Virtual Machine (S ...

  5. CodeForces 653 A. Bear and Three Balls——(IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2))

    传送门 A. Bear and Three Balls time limit per test 2 seconds memory limit per test 256 megabytes input ...

  6. vim中凝视多行python代码

    在vim中凝视多行python代码比較麻烦,主要由下面几种方法: (1)将须要凝视的代码以文档字符串的形式呈现 (2)将须要凝视的代码以函数的形式呈现 (3)使用vim自身快捷键 我们主要使用第三种方 ...

  7. JS基础之开篇

    JavaScript是解释型语言,无需编译就可以随时运行,这样哪怕语法有错误,没有语法错误的部分还是能正确运行. 1.JavaScript能做什么? 01, javaScript可以进行表单验证 如果 ...

  8. oc39-- 类的内存存储

    虚线是isa的指向,实线是继承关系. // // main.m // 类的本质 #import <Foundation/Foundation.h> #import "Person ...

  9. POJ 2976(01分数划分+二分)

                                                                                                  Droppi ...

  10. 排序系列 之 归并排序算法 —— Java实现

    基本思想: 归并排序法是分治法的典型实例,分为分割和归并两部分. 把一个数组分为大小相近的子数组(分割),分别把子数组排好序后,通过合成一个大的排好序的数组(归并). 实例: 先分割成每个子序列只有一 ...