-
Notifications
You must be signed in to change notification settings - Fork 69
/
Copy path1026-js-04.html
226 lines (216 loc) · 9.74 KB
/
1026-js-04.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
218
219
220
221
222
223
224
225
226
<!doctype html>
<html>
<head>
<meta 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="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/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>
<style type="text/css">
h3 {
font-family: 'Microsoft Yahei';
}
p {
font-size: 30px !important;
letter-spacing: 2px;
line-height: 50px !important;
text-align: center;
}
h5 {
text-align: left;
}
B {
color: rgb(195, 255, 219);
font-size: 40px !important;
font-weight: 500 !important;
}
a {
color: #fff !important;
}
</style>
</head>
<body>
<img src="./img/demo/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">
<div class="slides">
<section>
<h2>【JS-task4】</h2>
<h3>简述this指向</h3>
<h4>分享人：朱垚</h3>
</section>
<section>
<p style="text-align: center;">目录</p>
<p style="text-align: center;">1.背景介绍</p>
<p style="text-align: center;">2.知识剖析</p>
<p style="text-align: center;">3.常见问题</p>
<p style="text-align: center;">4.解决方案</p>
<p style="text-align: center;">5.编码实战</p>
<p style="text-align: center;">6.扩展思考</p>
<p style="text-align: center;">7.参考文献</p>
<p style="text-align: center;">8.更多讨论</p>
</section>
<!--1.背景介绍-->
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p> this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。</p>
</section>
</section>
<!--2.知识剖析-->
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<section>
<p>情况一：纯粹的函数调用</p>
<p>这是函数的最通常用法，属于全局性调用，在浏览器中全局对象就是window</p>
</section>
<section>
<pre>
<code>
function a(){
var user = "Tom";
console.log(this.user); //undefined
console.log(this); //Window
}
a();
</code>
</pre>
</section>
<section>
<p>情况二：作为对象方法的调用</p>
<p>函数还可以作为某个对象的方法调用，这时this就指这个上级对象。</p>
</section>
<section>
<pre>
<code>
var name = "user1";
var obj= {
name: "user2",
getName: function () {
console.log(this.name);
}
}
obj.getName();//user2
</code>
</pre>
</section>
<section>
<p>情况三：函数作为构造函数调用</p>
</section>
<section>
<pre>
<code>
function test(){
this.x = 1;
}
var o = new test();
console.log(o.x);//1
</code>
</pre>
<p>函数作为构造函数调用时this指向用该构造函数构造出来的新对象。</p>
</section>
</section>
<!--3.常见问题-->
<section>
<h3>3.常见问题</h3>
</section>
<section>
<p>apply、call的用法</p>
<p>这三个函数是函数对象的一个方法，他们的作用就是为了改变函数执行时候的this指向，具体用法如下：
call：call(obj,[arg1],[arg2]);第一个参数为强制改变需要指向的对象，后边可选的是该函数的参数，如果不传obj的话默认为window。
apply:apply(obj,[arr]);第一个参数为强制改变需要指向的对象，后边可选的是该参数集合的数组形式，如果不传obj的话默认为window。
apply和call的作用和调用形式基本一致，不同的是call后面的参数与方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和方法中一一对应的，这就是两者最大的区别。两者都可以不传参数，此时默认改变指向的对象为全局对象。
</p>
</section>
<!--4.解决方案-->
<section>
<h3>4.解决方案</h3>
</section>
<section>
<p>使用 call 和 apply 函数的时候要注意，如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。因此，如果传递的值是一个原始值比如
7 或 'foo'，那么就会使用相关构造函数将它转换为对象，所以原始值 7 会被转换为对象，像 new Number(7) 这样，而字符串 'foo' 转化成 new String('foo')
这样</p>
</section>
<!--5.编码实战-->
<section>
<h3>5.编码实战</h3>
</section>
<!--6.拓展思考-->
<section>
<h3>6.拓展思考</h3>
</section>
<section>
<h3>7.参考文献</h3>
参考1：<a href="http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html">Javascript的this用法</a>
<br>
参考2：<a href="https://www.cnblogs.com/wangjz1991/p/5451322.html">深入理解JAVASCRIPT系列：各种上下文中的THIS</a>
<br>
参考3：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this">MDN this</a>
<br>
</section>
<section>
<h3>8.更多讨论</h3>
</section>
<section>
<p style="text-align: center">感谢大家观看
<p style="text-align: center">
<small>BY : 朱垚</small>
</section>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
</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>