1 面向对象的js

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

编程语言按数据类型可分成静态类型和动态类型语言，其中js属于动态类型语言，对一个变量赋值时，不需要考虑其类型。

鸭子类型：
通俗理解，只要走起路来像鸭子，叫起来也像鸭子，那么它就是鸭子，如果一只鸡具有鸭子的行为，那它就可以被代替为鸭子。

鸭子类型指导我们只关注对象的行为，而不关注对象本身。

1.2 多态

定义：同一操作作用于不同的对象，可以产生不同的解释和执行结果。

举例说明：在动物类中，假如有一只鸡和一只鸭，对它们执行“叫”的命令，则鸡鸭分别会发出不同的叫声，而**“叫”的命令相当于操作，叫声相当于执行结果**

作用：通过把过程化的条件分支语句转化为对象的多态性，从而消除这些条件分支语句。

1.3 封装

理解：封装的目的是将信息隐藏，封装包括封装数据、封装实现、封装类型和封装变化。

封装数据：在许多语言的对象系统中，封装数据是由语法解析实现的，这些语言提供了private、public、protected等关键字来提供不同的访问权限。而JS中，只能依赖变量的作用域来实现封装特性。如ES6中的块级作用域、函数作用域。

封装实现：封装使得对象内部的变化对其他对象而言是透明的，对象对它自己的行为负责。封装使得对象之间的耦合变松散。

封装类型：封装类型是静态类型语言中分一种重要的封装方式，通过抽象类和接口来进行的。而JS中，没有这方面的能力，也没有必要做得更多。

封装变化：可以把系统中稳定不变的部分和容易变化的部分隔离开来，在系统演变的过程，只需要替换那些容易变化的部分。在最大程度上，保证程序的稳定性和可扩展性。

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

原型模式：不用关心对象的具体类型，而是找到一个对象，并通过克隆来创建一个一模一样的对象。其实现关键在于语言本身是否提供了clone方法，es5中提供Object.create方法可以用来克隆对象。

JS的原型编程基本规则以及JS是如何在这些规则的基础上构建它的对象系统的
所有的数据都是对象：JS在设计时，引入了基本类型和对象类型。基本类型中number，boolean，string数据并不是对象，那在设计过程中需要通过“包装类”的方式变成对象类型来处理。

虽然我们不能说在JS中所有的数据都是对象，但是绝大部分数据都是，同时在JS中也一定会有一个根对象存在，即Object.prototype对象。
var obj1 = new Object();
var obj2 = {};
console.log( Object.getPrototypeOf( obj1 ) === Object.prototype ); // 输出：true
console.log( Object.getPrototypeOf( obj2 ) === Object.prototype ); // 输出：true

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

对象会记住它的原型

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

2 this、call和apply

2.1 this的指向

作为对象的方法调用

当函数作为对象的方法被调用时，this指向该对象。

var obj = {a: 1,getA: function(){console.log(this === obj); // trueconsole.log(this.a); // 1}
};
obj.getA();

作为普通函数调用

当函数不作为对象的属性被调用时，this指向全局对象，在浏览器的JS中，全局对象是window对象。

var name = 'globalName';
var getName = function(){return this.name;
};
console.log( getName() ); // globalName
// 或者
var name = 'globalName';
var myObject = { name: 'sven', getName: function(){ return this.name; }
};
var getName = myObject.getName;
console.log( getName() );  // globalName 函数不作为对象的属性调用
console.log(myObject.getName()); // sven 函数作为对象的属性调用

构造器调用

当用new 运算符调用函数时，该函数返回一个对象，而通常情况下，构造器里的this就指向返回的这个对象。

var MyClass = function(){this.name = 'sven';
};
var obj = new MyClass();
console.log(obj); // MyClass {name: 'sven'}
console.log(obj.name); // sven
// 如果构造器显式的返回一个object类型的对象，那么此次运算结果最终返回该对象
var MyClass = function(){ this.name = 'sven'; return { // 显式地返回一个对象name: 'anne' } // 若返回的不是objecr类型的对象，如 ['a'], 则obj打印为['a'], obj.name打印为undefined
};
var obj = new MyClass();
console.log(obj); // {name: 'anne'}
console.log(obj.name); // anne
// 如果不显式地返回任何数据，或者返回一个非对象类型的数据，则不会造成上述问题：
var MyClass = function(){ this.name = 'sven'; return 'a'
};
var obj = new MyClass();
console.log(obj); // MyClass {name: 'sven'}
console.log(obj.name); // anne

call或apply调用

它的出现可以动态的改变传入函数的this

var name = "globalName";
var obj1 = { name: 'sven', getName: function(){ return this.name; }
};
var obj2 = { name: 'anne'
};
console.log( obj1.getName() ); // sven
console.log( obj1.getName.call( obj2 ) ); // anne
var obj3 = obj1.getName;
console.log(obj3()); // globalName
var obj3 = obj1.getName;
console.log(obj3.call(obj2)); // anne

2.2 call和apply

区别：

apply：接受两个参数，第一个参数指定函数体内this对象的指向，第二个数组为一个带下标的集合，可以是数组，也可以是类数组。

call：接受两个参数，第一个参数指定函数体内this对象的指向，从第二个参数开始往后，每个参数被依次传入函数。

当使用call或者apply时，如果传入的第一个参数为null，则this会指向默认的宿主对象，在浏览器中则是window。但在严格模式下，函数体内的this还是为null。

用途：
改变this指向

借用其它对象的方法

3 闭包和高阶函数

3.1 闭包

变量的作用域：当在函数中搜索变量的时候，如果该函数内并没有声明这个变量，那么此次搜索的过程会随着代码的执行环境创建的作用域网外层逐层搜索，一直搜索到全局对象为止。变量的搜索是从内到外的。

变量的生存周期：对于全局变量而言，生存周期是永久的，除非主动销毁这个全局变量，而var关键字声明的局部变量，当退出函数时，这些局部变量失去了它们的价值，会随着函数调用的结束而被销毁。

闭包的作用
封装变量：帮助把一些不需求暴露都在全局的变量封装成“私有变量”
-延续局部变量的寿命

3.2 高阶函数

满足条件：

函数可以作为参数被传递：如回调函数，Array.prototype.sort。

函数可以作为返回值输出：如判断数据的类型，getSingle

4 单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

4.1 实现单例模式

var Singleton = function( name ){ this.name = name; this.instance = null;
};
Singleton.prototype.getName = function(){console.log(this);console.log(this.name);
};
Singleton.getInstance = function( name ){ console.log(this);console.log(this.instance);if ( !this.instance ){this.instance = new Singleton( name ); } return this.instance;
};
var a = Singleton.getInstance( 'sven1' );
var b = Singleton.getInstance( 'sven2' );
console.log(a);
console.log(b);
console.log(a.name);

分析：首先这里的函数都是以函数表达式的形式定义，因此不存在声明提前，当执行var a = Singleton.getInstance( 'sven1' ); 时，在Singleton.getInstance方法中，this指向该函数

js设计模式与开发实践(读书笔记)相关推荐

javascript设计模式(javascript设计模式与开发实践读书笔记)
javascript设计模式(javascript设计模式与开发实践读书笔记) 单例模式策略模式代理模式迭代器模式发布-订阅模式命令模式组合模式模板方法模式享元模式职责链模式中介者 ...
JavaScript设计模式与开发实践---读书笔记(6) 代理模式
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象 ...
Javascript设计模式与开发实践读书笔记（1-3章）
第一章面向对象的Javascript 1.1 多态在面向对象设计中的应用多态最根本好处在于,你不必询问对象"你是什么类型"而后根据得到的答案调用对象的某个行为--你只管调用 ...
(JS设计模式与开发实践笔记)第二章
第二章:this.call和apply this JS的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境. this指向的四种情况作为对象的 ...
python web 开发实践读书笔记
一,建立虚拟运行环境工具(virtualenvwrapper) 1,使用此工具需要对shell配置文件进行相应修改 if [ -f /usr/local/bin/virtualenvwrapper.s ...
【夯实基础】《JavaScript设计模式与开发实践》笔记——闭包和高阶函数
虽然 JavaScript 是一门完整的面向对象的编程语言,但这门语言同时也拥有许多函数式语言的特性. 函数式语言的鼻祖是 LISP,JavaScript 在设计之初参考了 LISP 两大方言之一的 ...
JavaScript设计模式与开发实践(网课学习)
Js设计模式与开发实践面向对象 5大设计原则 23种设计模式(实际只有21种) 设计模式主要分为下面三大类创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模 ...
JS代理模式《JavaScript设计模式与开发实践》阅读笔记
代理模式代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 保护代理和虚拟代理保护代理:当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤. 虚拟 ...
JAVA WEB整合开发王者归来 -- 读书笔记 by CZF 完整版
JAVA WEB整合开发王者归来 -- 读书笔记目录第1章概述. 1 第2章搭建web开发环境. 1 第3章 Servlet技术. 1 第4章深入JSP技术. 7 第5章会话跟踪. 12 ...

js设计模式与开发实践(读书笔记)

1 面向对象的js

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

1.2 多态

1.3 封装

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

2 this、call和apply

2.1 this的指向

2.2 call和apply

3 闭包和高阶函数

3.1 闭包

3.2 高阶函数

4 单例模式

4.1 实现单例模式

js设计模式与开发实践(读书笔记)相关推荐

最新文章

热门文章