针对基础知识的每一个小点,我都写了一些小例子,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. javascript打开本地应用

    function openShell(){ if(window.ActiveXObject){ var cmd = new ActiveXObject('WScript.Shell') cmd.Run ...

  2. Delphi7中的函数与过程(Function and Procedure)

    1.锁住空间的位置,可以选择Edit--->Lock component ,也可以在窗体设计面板下面找到组件排版功能栏,第二排里面有个带锁的图标,表示组件可以被锁住.点击一下,组件的大小和位置就 ...

  3. hdu 6112 今夕何夕(模拟)

    今夕何夕 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. Opencv保存摄像头视频&&各种编码器下视频文件占用空间对比

    打开视频文件或摄像头视频需要使用Opencv中的VideoCapture类,保存视频或摄像头视频到本地磁盘,需要使用Opencv中的VideoWriter类,使用都很简单,这篇文章就记录一下Video ...

  5. glance rabbit

  6. Coursera Algorithms week3 归并排序 练习测验: Merging with smaller auxiliary array

    题目原文: Suppose that the subarray a[0] to a[n-1] is sorted and the subarray a[n] to a[2*n-1] is sorted ...

  7. aspectC++常用命令

    常用命令:1.ag++ main.cc //在工程目录下产生编译后的exe2.ag++ main.cc --weave_only //产生.acc 纯c++文件3.ag++ main.cc --gen ...

  8. bzoj 1468 Tree(点分治模板)

    1468: Tree Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1527  Solved: 818[Submit][Status][Discuss] ...

  9. jdbc 接口学习笔记

    一.JDBC概念 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系型数据库提供统一访问,它由一组用Jav ...

  10. Android中Button四种点击事件实现方式

    1.Xml添加监听属性,这里添加的doClick. <Button android:id="@+id/bt1" android:layout_width="wrap ...