Javascript设计模式学习一
学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识、this等重要概念,以及掌握一些函数式编程的技巧。
Js多态
多态的思想:实际上是把“做什么”和“谁去做”分离开来。
例:
var makeSound = function(animal){
if(animal.show instanceof Function){
animal.show();
}
}
var dog = {
show: function(){
console.log('汪汪');
}
}
var cat = {
show: function(){
console.log('喵喵');
}
}
makeSound(dog); //输出:汪汪
makeSound(cat); //输出:喵喵
Js封装
例:
var myObject = (function(){
var name = 'hello';
return {
getName: function(){
return name;
}
}
})();
console.log(myObject.getName()); //hello
console.log(myObject.name); //undefined
this的指向:
1.当函数作为对象的方法调用时,this指向该对象
var obj = {
name: 'hello',
getName: function(){
console.log(this===obj); //true
console.log(this.name); //hello
}
}
obj.getName();
2.当函数作为普通函数调用时,this指向全局对象即window对象
window.name = 'globalName';
var getName = function(){
return this.name;
};
console.log(getName()); //globalName
//或者
window.name = 'globalName';
var myObject = {
name: 'hello',
getName: function(){
return this.name;
}
};
var getName = myObject.getName;
console.log(getName()); //globalName
3.构造器调用,构造器里的this指向返回的这个对象
var myClass = function(){
this.name = 'Class';
}
var obj = new myClass();
console.log(obj.name); //Class
4.Function.prototype.call或Function.prototype.apply调用,可以动态地改变传入函数的this
var obj1 = {
name: 'hello',
getName: function(){
return this.name;
}
};
var obj2 = {
name: 'hi'
};
console.log(obj1.getName()); //hello
console.log(obj1.getName.call(obj2)); //hi
call 和 apply
作用是一模一样的,区别仅在于传入参数形式不同。
apply接受两个参数,第一个参数指定了函数体内this对象的指向,第二个参数是一个带下标的集合,这个集合可以数组,也可以是类数组。
var func = function(a,b,c){
console.log([a,b,c]); //[1,2,3]
}
func.apply(null,[1,2,3]);
这段代码中,参数1、2、3放在数组中一起传入func函数,分别对应a、b、c,第一参数为null,函数体this指向默认宿主对象,浏览器中则是window。
call传入的参数数量不固定,第一个参数也是代表函数体内的this指向,从第二个参数起往后,每个参数依次传入函数。
call 和 apply 的用途
1.改变this指向
var obj1 = {
name: 'objName'
};
window.name = 'window';
var getName = function(){
console.log(this.name);
};
getName(); //window
getName.call(obj1); //objName
2.借用其他对象的方法
var A = function(name){
this.name = name;
};
var B = function(){
console.log(arguments);
A.apply(this,arguments);
};
B.prototype.getName = function(){
return this.name;
};
var b = new B('hello');
console.log(b.getName()); //hello
Javascript设计模式学习一的更多相关文章
- JavaScript设计模式学习之路——面向对象的思想
今天,我拿到了张容铭写的这本<JavaScript设计模式>这本书,开始了关于JavaScript更深一点的学习. 看到这本书开始的时候,虽然之前通过看书.一些比较好的视频的讲解,对Jav ...
- JavaScript设计模式学习笔记
1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...
- javascript设计模式学习之十二——享元模式
一.享元模式的定义及使用场景 享元模式是为了解决性能问题而诞生的设计模式,这和大部分设计模式为了提高程序复用性的原因不太一样,如果系统中因为创建了大量类似对象而导致内存占用过高,享元模式就非常有用了. ...
- javascript设计模式学习之十七——程序设计原则与面向接口编程
一.编程设计原则 1)单一职责原则(SRP): 这里的职责是指“引起变化的原因”:单一职责原则体现为:一个对象(方法)只做一件事. 事实上,未必要在任何时候都一成不变地遵守原则,实际开发中,因为种种原 ...
- javascript设计模式学习之十六——状态模式
一.状态模式的定义 状态模式的关键是区分事务内部和外部的状态,事务内部状态改变往往会带来事务的行为改变. 状态模式中有意思的一点是,一般我们谈到封装,都是优先封装对象的行为,而非对象的状态.但在状态模 ...
- javascript设计模式学习之十三——职责链模式
一.职责链的定义和使用场景 职责链模式的定义是,职责链模式将一系列可能会处理请求的对象连接成一条链,请求在这些对象之间一次传递,直到遇到一个可以处理它的对象.从而避免请求的发送者和接收者之间的耦合关系 ...
- javascript设计模式学习之十——组合模式
一.组合模式定义及使用场景 组合模式将对象组合成树形结构,用以表示“部分—整体”的层次结构,除了用来表示树形结构之外,组合模式还可以利用对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性. ...
- javascript设计模式学习之九——命令模式
一.命令模式使用场景及定义 命令模式常见的使用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道请求的具体操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求的发送者和 ...
- JavaScript设计模式学习之路——继承
早在学习java的时候,就已经接触了继承,在java中因为有extends关键字,因此继承就比较简单.但是在JavaScript中,只能通过灵活的办法实现类的继承. 下面是我昨天在学习过程中,了解到的 ...
随机推荐
- LK产品如何提高通信速率
之前做LK,由于采用自定义协议,485通信.为了避免通信撞车,采用主控轮询.从机应答的通信方式. 当设备规模扩大,需要轮询的子设备和参数变多时,轮询周期就会加长,人机交互时,系统反应缓慢. 分析主控轮 ...
- Pwn~
Pwn Collections Date from 2016-07-11 Difficult rank: $ -> $$... easy -> hard CISCN 2016 pwn-1 ...
- Ettercap几种好玩的姿势
0x00 简单的arp欺骗 命令 ettercap -i 网卡 -Tq -M arp:remote /受害者ip/ /网关ip/ 以下是我欺骗192.168.1.102主机并模拟http-get请 ...
- Linux的一些基本概述以及系统使用
GNU:项目名称(意指开发在类UNIX系统上的软件).POSIX:可移植(Portable)操作系统接口,便于程序在不同操作系统上运行. Linux是符合POSIX标准的操作系统: 完全兼容POSIX ...
- Openjudge 1.13-21:最大质因子序列(每日两水)
总时间限制: 1000ms 内存限制: 65536kB 描述 任意输入两个正整数m, n (1 < m < n <= 5000),依次输出m到n之间每个数的最大质因子(包括m和n ...
- C#中的WebBrowser控件的使用
0.常用方法 Navigate(string urlString):浏览urlString表示的网址 Navigate(System.Uri url):浏览url表示的网址 Navigate(st ...
- Android之什么是Activity和常用的ADB命令以及Android项目结构的认识
总结一下之前学习Android的一些内容 一: Android常用的ADB命令(adb android调试桥) 1.adb devices 查看模拟器设备并重新连接. 2.adb ki ...
- insmod模块的几种常见错误
1. 与内核版本不一致 嵌入式开发时,模块编译时需要制定内核的路径,内核的版本信息会加入到模块文件中,如果目标板上运行的内核与模块中包含的内核版本对不上,加载就会出错,报如下错误: insmod i ...
- 一些常用的git指令
PyCharm编辑器 如何切换分支 git branch 查看当前在哪个分支,也会显示本地所有的分支名 git branch dev-chenqiao 新建分支 git checkout dev-ch ...
- Javascript两个感叹号的用法(!!)
var foo; alert(!foo);//undefind情况下或者null,一个感叹号返回的是true; alert(!goo);//undefind情况下,一个感叹号返回的也是true; 但是 ...