针对基础知识的每一个小点,我都写了一些小例子,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. linux 下ip命令对比ifconfig命令

    原文:https://linux.cn/article-3144-1.html ------------------------------------------------------------ ...

  2. IO 字节流学习

    复制图片和MP3 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.Fil ...

  3. Oracle EBS 从Web界面进入责任时,提示不存在可用的有效责任

    Oracle EBS 从Web界面进入责任时,提示不存在可用的有效责任         每次在Web界面,点击某一责任的功能时,弹出Form.会提示错误:对不起,不存在可用的有效责任.         ...

  4. HDOJ 5417 Victor and Machine 水

    Victor and Machine Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Othe ...

  5. 腾讯面试题:A.txt和B.txt两个文件,A有1亿个qq号,B有100万个,用代码实现交、并、差

    在STL中关于有序序列有这么四个算法: set_union(beg, end, beg, end2, dest);                    //求并集A∪B set_union(beg, ...

  6. hdu5044(二分)

    题意:一个树上建两个加油站.使得全部点到达其近期加油站的最大距离最小. 解法:二分答案.关键时二分时候,要最合理话布局两个点的位置,做法是处理出来树的直径,然后在直径两端分别向中间移动二分的x步的两个 ...

  7. 自己定义控件-仿iphone之ToggleButton&amp;VoiceSeekBar

    由于项目中须要使用开关切换button,和声音滑动控件,可是原生Android5.0版本号以下的控件实在是太挫了.尽管网上已经有非常多关于这两个控件的blog.可是我实在是找不到像iPhone这样简洁 ...

  8. 通过命令行升级git for windows

    git update-git-for-windows 配置了正确的代理,就可以通过命令行直接升级.最好是可以访问谷歌的代理,否则国内的网络通过命令行升级,下载到一半,就会失败.

  9. P1228 地毯填补问题(分治)

    P1228 地毯填补问题(分治) 题目描述 相传在一个古老的阿拉伯国家里,有一座宫殿.宫殿里有个四四方方的格子迷宫,国王选择驸马的方法非常特殊,也非常简单:公主就站在其中一个方格子上,只要谁能用地毯将 ...

  10. Sudoku(dfs)

    http://poj.org/problem?id=2676 填九宫格 思路:将每一行,每一列及每一个3*3块中出现的数字标记上,将可填的空的位置记录下来,枚举1-9,填入合适的数. #include ...