Skip to content

Commit 27a75e3

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
更新了C2
1 parent ff655e5 commit 27a75e3

11 files changed

+560
-0
lines changed

‎7 设计模式/1.1 动态语言类型.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+

2+
<script type="text/javascript">
3+
var duck = {
4+
duckSinging: function(){
5+
console.log( '嘎嘎嘎' );
6+
}
7+
};
8+
9+
var chicken = {
10+
duckSinging: function(){
11+
console.log( '嘎嘎嘎' );
12+
}
13+
};
14+
15+
var choir = []; // 合唱团
16+
var joinChoir = function( animal ){
17+
if ( animal && typeof animal.duckSinging === 'function' ){
18+
choir.push( animal );
19+
console.log( '恭喜加入合唱团' );
20+
console.log( '合唱团已有成员数量:' + choir.length );
21+
}
22+
};
23+
24+
joinChoir( duck ); // 恭喜加入合唱团
25+
joinChoir( chicken ); // 恭喜加入合唱团
26+
27+
</script>

‎7 设计模式/1.2.1 多态1.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script type="text/javascript">
2+
3+
var makeSound = function( animal ){
4+
if ( animal instanceof Duck ){
5+
console.log( '嘎嘎嘎' );
6+
}else if ( animal instanceof Chicken ){
7+
console.log( '咯咯咯' );
8+
}
9+
};
10+
11+
var Duck = function(){};
12+
var Chicken = function(){};
13+
14+
makeSound( new Duck() ); // 嘎嘎嘎
15+
makeSound( new Chicken() ); // 咯咯咯
16+
17+
</script>

‎7 设计模式/1.2.2 多态2.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script type="text/javascript">
2+
3+
var makeSound = function( animal ){
4+
animal.sound();
5+
};
6+
7+
var Duck = function(){};
8+
9+
Duck.prototype.sound = function(){
10+
console.log( '嘎嘎嘎' );
11+
};
12+
13+
var Chicken = function(){};
14+
15+
Chicken.prototype.sound = function(){
16+
console.log( '咯咯咯' );
17+
};
18+
19+
makeSound( new Duck() ); // 嘎嘎嘎
20+
makeSound( new Chicken() ); // 咯咯咯
21+
22+
var Dog = function(){};
23+
24+
Dog.prototype.sound = function(){
25+
console.log( '汪汪汪' );
26+
};
27+
28+
makeSound( new Dog() ); // 汪汪汪
29+
30+
</script>

‎7 设计模式/1.2.3 多态3.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+

2+
<script type="text/javascript">
3+
4+
var googleMap = {
5+
show: function(){
6+
console.log( '开始渲染谷歌地图' );
7+
}
8+
};
9+
10+
var renderMap = function(){
11+
googleMap.show();
12+
};
13+
14+
renderMap(); // 输出：开始渲染谷歌地图
15+
16+
var googleMap = {
17+
show: function(){
18+
console.log( '开始渲染谷歌地图' );
19+
}
20+
};
21+
22+
var baiduMap = {
23+
show: function(){
24+
console.log( '开始渲染百度地图' );
25+
}
26+
};
27+
28+
var renderMap = function( type ){
29+
if ( type === 'google' ){
30+
googleMap.show();
31+
}else if ( type === 'baidu' ){
32+
baiduMap.show();
33+
}
34+
};
35+
36+
renderMap( 'google' ); // 输出：开始渲染谷歌地图
37+
renderMap( 'baidu' ); // 输出：开始渲染百度地图
38+
39+
var renderMap = function( map ){
40+
if ( map.show instanceof Function ){
41+
map.show();
42+
}
43+
};
44+
45+
renderMap( googleMap ); // 输出：开始渲染谷歌地图
46+
renderMap( baiduMap ); // 输出：开始渲染百度地图
47+
48+
var sosoMap = {
49+
show: function(){
50+
console.log( '开始渲染搜搜地图' );
51+
}
52+
};
53+
54+
renderMap( sosoMap ); // 输出：开始渲染搜搜地图
55+
56+
</script>

‎7 设计模式/1.3 封装.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script type="text/javascript">
2+
3+
var myObject = (function(){
4+
var __name = 'sven'; // 私有（private）变量
5+
return {
6+
getName: function(){ // 公开（public）方法
7+
return __name;
8+
}
9+
}
10+
})();
11+
12+
console.log( myObject.getName() ); // 输出：sven
13+
console.log( myObject.__name ) // 输出：undefined
14+
15+
</script>

‎7 设计模式/1.4 对象克隆.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script type="text/javascript">
2+
3+
var Plane = function(){
4+
this.blood = 100;
5+
this.attackLevel = 1;
6+
this.defenseLevel = 1;
7+
};
8+
9+
var plane = new Plane();
10+
plane.blood = 500;
11+
plane.attackLevel = 10;
12+
plane.defenseLevel = 7;
13+
14+
var clonePlane = Object.create( plane );
15+
console.log( clonePlane ); // 输出：Object {blood: 500, attackLevel: 10, defenseLevel: 7}
16+
17+
//在不支持Object.create 方法的浏览器中，则可以使用以下代码：
18+
Object.create = Object.create || function( obj ){
19+
var F = function(){};
20+
F.prototype = obj;
21+
return new F();
22+
}
23+
24+
</script>

‎7 设计模式/1.5 原型模式.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script type="text/javascript">
2+
3+
'use strict'
4+
5+
var obj1 = new Object();
6+
var obj2 = {};
7+
8+
console.log( Object.getPrototypeOf( obj1 ) === Object.prototype ); // 输出：true
9+
console.log( Object.getPrototypeOf( obj2 ) === Object.prototype ); // 输出：true
10+
11+
12+
//再来看看如何用new 运算符从构造器中得到一个对象，下面的代码我们再熟悉不过了：
13+
function Person( name ){
14+
this.name = name;
15+
};
16+
17+
Person.prototype.getName = function(){
18+
return this.name;
19+
};
20+
21+
var a = new Person( 'sven' )
22+
console.log( a.name ); // 输出：sven
23+
console.log( a.getName() ); // 输出：sven
24+
console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出：true
25+
26+
//在Chrome 和Firefox 等向外暴露了对象__proto__属性的浏览器下，我们可以通过下面这段代码来理解new 运算的过程：
27+
function Person( name ){
28+
this.name = name;
29+
};
30+
31+
Person.prototype.getName = function(){
32+
return this.name;
33+
};
34+
35+
var objectFactory = function(){
36+
var obj = new Object(), // 从Object.prototype 上克隆一个空的对象
37+
Constructor = [].shift.call( arguments ); // 取得外部传入的构造器，此例是Person
38+
obj.__proto__ = Constructor.prototype; // 指向正确的原型
39+
var ret = Constructor.apply( obj, arguments ); // 借用外部传入的构造器给obj 设置属性
40+
return typeof ret === 'object' ? ret : obj; // 确保构造器总是会返回一个对象
41+
};
42+
43+
var a = objectFactory( Person, 'sven' );
44+
45+
console.log( a.name ); // 输出：sven
46+
console.log( a.getName() ); // 输出：sven
47+
console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出：true
48+
49+
50+
//下面的代码是我们最常用的原型继承方式：
51+
52+
var obj = { name: 'sven' };
53+
var A = function(){};
54+
A.prototype = obj;
55+
var a = new A();
56+
console.log( a.name ); // 输出：sven
57+
58+
//当我们期望得到一个“类”继承自另外一个“类”的效果时，往往会用下面的代码来模拟实现：
59+
var A = function(){};
60+
A.prototype = { name: 'sven' };
61+
var B = function(){};
62+
B.prototype = new A();
63+
var b = new B();
64+
console.log( b.name ); // 输出：sven
65+
66+
//通过Class 创建对象的一段简单示例代码①如下所示 ：
67+
class Animal {
68+
constructor(name) {
69+
this.name = name;
70+
}
71+
72+
getName() {
73+
return this.name;
74+
}
75+
}
76+
77+
class Dog extends Animal {
78+
constructor(name) {
79+
super(name);
80+
}
81+
speak() {
82+
return "woof";
83+
}
84+
}
85+
86+
var dog = new Dog("Scamp");
87+
console.log(dog.getName() + ' says ' + dog.speak());
88+
89+
</script>

‎7 设计模式/2.1 this&call&apply1.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<script type="text/javascript">
2+
3+
//当函数作为对象的方法被调用时，this 指向该对象：
4+
5+
var obj = {
6+
a: 1,
7+
getA: function(){
8+
alert ( this === obj ); // 输出：true
9+
alert ( this.a ); // 输出: 1
10+
}
11+
};
12+
13+
obj.getA();
14+
15+
16+
//在浏览器的JavaScript 里，这个全局对象是window 对象。
17+
window.name = 'globalName';
18+
19+
var getName = function(){
20+
return this.name;
21+
};
22+
console.log( getName() ); // 输出：globalName
23+
24+
//或者：
25+
window.name = 'globalName';
26+
27+
var myObject = {
28+
name: 'sven',
29+
getName: function(){
30+
return this.name;
31+
}
32+
};
33+
34+
var getName = myObject.getName;
35+
console.log( getName() ); // globalName
36+
37+
</script>
38+
39+
<html>
40+
<body>
41+
<div id="div1">我是一个div</div>
42+
</body>
43+
<script>
44+
45+
window.id = 'window';
46+
47+
document.getElementById( 'div1' ).onclick = function(){
48+
alert ( this.id ); // 输出：'div1'
49+
var callback = function(){
50+
alert ( this.id ); // 输出：'window'
51+
}
52+
callback();
53+
};
54+
55+
56+
document.getElementById( 'div1' ).onclick = function(){
57+
var that = this; // 保存div 的引用
58+
var callback = function(){
59+
alert ( that.id ); // 输出：'div1'
60+
}
61+
callback();
62+
};
63+
64+
</script>
65+
</html>
66+
67+
68+
69+
<script type="text/javascript">
70+
71+
function func(){
72+
"use strict"
73+
alert ( this ); // 输出：undefined
74+
}
75+
76+
func();
77+
78+
</script>
79+
80+
81+
<script type="text/javascript">
82+
//构造器里的this 就指向返回的这个对象，见如下代码：
83+
var MyClass = function(){
84+
this.name = 'sven';
85+
};
86+
87+
var obj = new MyClass();
88+
alert ( obj.name ); // 输出：sven
89+
90+
var MyClass = function(){
91+
this.name = 'sven';
92+
return { // 显式地返回一个对象
93+
name: 'anne'
94+
}
95+
};
96+
97+
var obj = new MyClass();
98+
alert ( obj.name ); // 输出：anne
99+
100+
var MyClass = function(){
101+
this.name = 'sven'
102+
return 'anne'; // 返回string 类型
103+
};
104+
105+
var obj = new MyClass();
106+
alert ( obj.name ); // 输出：sven
107+
108+
var obj1 = {
109+
name: 'sven',
110+
getName: function(){
111+
return this.name;
112+
}
113+
};
114+
115+
var obj2 = {
116+
name: 'anne'
117+
};
118+
119+
console.log( obj1.getName() ); // 输出: sven
120+
console.log( obj1.getName.call( obj2 ) ); // 输出：anne
121+
122+
</script>

0 commit comments

Comments
 (0)