-
Notifications
You must be signed in to change notification settings - Fork 69
/
2018-06-05-D-lzh.html
217 lines (189 loc) · 11.7 KB
/
2018-06-05-D-lzh.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<!-- saved from url=(0075)https://gitubwandengsheng.github.io/WEB-NEW/2018-6-1-C%E7%BB%84-js-6.html#/ -->
<html class=" js no-mobile desktop no-ie chrome chrome67 web-new-section w-1920 gt-240 gt-320 gt-480 gt-640 gt-768 gt-800 gt-1024 gt-1280 gt-1440 gt-1680 no-portrait landscape gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded"
id="2018-6-1-c%e7%bb%84-js-6-page">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./葡萄藤PPT_files/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./葡萄藤PPT_files/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./葡萄藤PPT_files/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' :
'./css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<link rel="stylesheet" type="text/css" href="./葡萄藤PPT_files/paper.css">
<style type="text/css">
h3 {
font-family: 'Microsoft Yahei';
}
p {
font-size: 30px !important;
letter-spacing: 2px;
line-height: 50px !important;
text-align: left;
}
B {
color: rgb(195, 255, 219);
font-size: 40px !important;
font-weight: 500 !important;
}
a {
color: #fff !important;
}
</style>
<script type="text/javascript" src="./葡萄藤PPT_files/marked.js.下载"></script>
<script type="text/javascript" src="./葡萄藤PPT_files/markdown.js.下载"></script>
<script type="text/javascript" src="./葡萄藤PPT_files/notes.js.下载"></script>
<script type="text/javascript" src="./葡萄藤PPT_files/highlight.js.下载"></script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
<div class="slides" style="width: 960px; height: 700px; zoom: 1.21757;">
<section class="present" style="top: 188.5px; display: block;">
<h2>什么是原型</h2>
<h3>小课堂</h3>
分享人：刘泽华
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 126.5px; display: block;">
一. 普通对象与函数对象 JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明 凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。f1,f2,归根结底都是通过
new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。
</section>
<!--1.背景介绍-->
<section hidden="" aria-hidden="true" class="stack future" style="top: 0px; display: block;">
<section style="top: 267px; display: block;">
我们要记住两个概念（构造函数，实例）： person1 和 person2 都是 构造函数 Person 的实例 一个公式： 实例的构造函数属性（constructor）指向构造函数。
</section>
</section>
<!--2.知识剖析-->
<section hidden="" aria-hidden="true" class="stack future" style="top: 330px; display: none;">
</section>
<!--2.1 JS有哪些数据类型？-->
<section hidden="" aria-hidden="true" class="stack future" style="top: 330px; display: none;">
在上面我们给 A 添加了 四个属性：name、age、job、sayName。其实它还有一个默认的属性：constructor
在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）
上面这句话有点拗口，我们「翻译」一下：A 有一个默认的 constructor 属性，这个属性是一个指针，指向 Person。即：
Person.prototype.constructor == Person
在上面第二小节《构造函数》里，我们知道实例的构造函数属性（constructor）指向构造函数 ：person1.constructor == Person
这两个「公式」好像有点联系：
person1.constructor == Person
Person.prototype.constructor == Person
person1 为什么有 constructor 属性？那是因为 person1 是 Person 的实例。
那 Person.prototype 为什么有 constructor 属性？？同理， Person.prototype （你把它想象成 A） 也是Person 的实例。
也就是在 Person 创建的时候，创建了一个它的实例对象并赋值给它的 prototype，基本过程如下：
var A = new Person();
Person.prototype = A;
结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。
</section>
<!--3.常见问题-->
<section hidden="" aria-hidden="true" class="stack future" style="top: 330px; display: none;">
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<p style="text-align: center">感谢大家观看</p>
</section>
<script src="./葡萄藤PPT_files/head.min.js.下载"></script>
<script src="./葡萄藤PPT_files/reveal.js.下载"></script>
</div>
<div class="backgrounds">
<div class="slide-background present" data-loaded="true" style="display: block;"></div>
<div class="slide-background future" data-loaded="true" style="display: block;"></div>
<div class="slide-background stack future" data-loaded="true" style="display: block;">
<div class="slide-background present" data-loaded="true" style="display: block;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
</div>
<div class="slide-background stack future" style="display: none;">
<div class="slide-background present" style="display: none;"></div>
</div>
<div class="slide-background stack future" style="display: none;">
<div class="slide-background present" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
</div>
<div class="slide-background stack future" style="display: none;">
<div class="slide-background present" style="display: none;"></div>
</div>
<div class="slide-background future" style="display: none;"></div>
<div class="slide-background future" style="display: none;"></div>
</div>
<div class="progress" style="display: block;">
<span style="width: 0px;"></span>
</div>
<aside class="controls" style="display: block;">
<button class="navigate-left" aria-label="previous slide"></button>
<button class="navigate-right enabled" aria-label="next slide"></button>
<button class="navigate-up" aria-label="above slide"></button>
<button class="navigate-down" aria-label="below slide"></button>
</aside>
<div class="slide-number" style="display: none;"></div>
<div class="speaker-notes" data-prevent-swipe=""></div>
<div class="pause-overlay"></div>
<div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">
如何使用ui-router？ 小课堂 分享人：刘泽华
</div>
</div>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [{
src: './plugin/markdown/marked.js'
},
{
src: './plugin/markdown/markdown.js'
},
{
src: './plugin/notes/notes.js',
async: true
},
{
src: './plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>