-
Notifications
You must be signed in to change notification settings - Fork 69
/
1014-js-02.html
278 lines (262 loc) · 11.2 KB
/
1014-js-02.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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!doctype 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>
</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中this的指向</h2>
<p>分享人：钟楚炯</p>
</section>
<section>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p>在javaScript中，this是动态绑定的，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。
这就导致了this具备了多重含义，可以使得this可以更灵活地使用。
但是，带来了灵活性的同时也会给我们初学者带来不少困惑。
简而言之, this 是一个特殊的标识符关键字 —— 在每个 function 中自动根据作用域(scope) 确定,
指向的是此次调用的 “所有者,owner”。</p>
</section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<p>this指向在函数定义的时候是确定不了的，只有函数被调用的时候才能够确定,实际上this的最终指向的是<b>那个调用它的对象</b></p>
</section>
<section>
<h3>this的常见的四种情形</h3>
<ul>
<li>纯粹的作为函数调用：全局函数中，this指向window</li>
<li>作为对象方法的调用：当函数被作为某个对象的方法调用时，this就是那个对象</li>
<li>作为构造函数调用：this指向新对象</li>
<li>apply、call调用：this指向改变后的调用这个函数的对象</li>
</ul>
</section>
<section>
<p>1、全局环境中的this</p>
<pre>
<code>
function a(){
console.log(this);
}
a();
</code>
</pre>
<p>这里调用了a函数，而a函数的执行环境是全局环境，这里的this也就指向了全局变量window。</p>
</section>
<section>
<p>严格模式 ‘use strict’下的this</p>
<pre>
<code>
'use strict';
function a(){
this.user = "hello";
console.log(this);
console.log(this.user);
}
a();
console.log(user)
</code>
</pre>
<p>在严格模式下，在全局环境中执行函数调用的时候 this 并不会指向 window 而是会指向 undefined。如果不用严格模式，可能你不知不觉中就定义了几个全局变量。</p>
</section>
<section>
<p>2.如果函数作为一个对象的属性方法，并且被调用的时候，this 就指向这个对象。</p>
<pre>
<code>
var name = '楞头青';
var person = {
name: '铁头娃',
sayName: function() {
console.log(this.name);
}
};
var sayNameWin = person.sayName;
person.sayName(); //铁头娃
sayNameWin(); //楞头青 作为 window 的方法被调用的
</code>
</pre>
</section>
<section>
<p>3.作为构造函数被调用的时候，this 代表它即将 new 出来的对象</p>
<pre>
<code>
function Person(name) {
this.name = name;
console.log(this);
}
var person = new Person('楞头青');
console.log(person.name); //楞头青
</code>
</pre>
<p>注：构造函数不使用new调用，则和普通函数一样。一般地，构造函数首字母大写</p>
</section>
<section>
<p>如果不加 new,表示即作为普通函数调用，指向 window</p>
<pre>
<code>
function Person(name) {
this.name = name;
console.log(this); //window
}
Person('铁头娃');
console.log(window.name); //铁头娃
</code>
</pre>
</section>
<section>
<b>4.作为 call/apply/bind 方法的调用</b>
<p>作为 call/apply/bind 方法被调用的时候指向传入的值</p>
<pre>
<code>
var person = {
name: '楞头俊'
};
function fn() {
console.log(this); //Object {name: "楞头俊"}
console.log(this.name); //楞头俊
}
fn.apply(person);
</code>
</pre>
</section>
<section>
<h3>3、常见问题</h3>
</section>
<section>
<b>setTimeout、setInterval中的this是指向哪里？</b>
</section>
<section>
<h3>4、解决方案</h3>
</section>
<section>
<p>《 javascript 高级程序设计》中写到：“超时调用的代码都是在全局执行域中执行的”。setTimeout/setInterval 执行的时候，this 默认指向 window 对象，除非手动改变 this 的指向。</p>
<pre>
<code>
var name = '楞头俊';
function Person(){
this.name = '铁头威';
this.sayName=function(){
console.log(this); //window
console.log(this.name); //楞头俊
};
setTimeout(this.sayName, 10);
}
var person=new Person();
</code>
</pre>
</section>
<section>
<h3>5、编码实战</h3>
</section>
<section>
<h3>6.扩展思考</h3>
</section>
<section>
<p>如何改变this的指向？</p>
</section>
<section>
<p>可以使用call或者apply的方法</p>
<pre>
<code>
// 一个对象可以作为call和apply的第一个参数，并且this会被绑定到这个对象。
var obj = {name: '麻辣俊'};
// 这个属性是在global对象定义的。
var name = '开放树';
function foo() {
console.log(this.name) // this的值取决于函数的调用方式
}
foo(); // '开放树'
foo.call(obj); // '麻辣俊'
foo.apply(obj); // '麻辣俊'
</code>
</pre>
</section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<p>参考一：<a href="https://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/">深入浅出 JavaScript 中的 this</a>
</p>
<p>参考二：<a href="https://qiutc.me/post/this-this-this-in-javascript.html">JavaScript 中的 this !</a></p>
<p>参考三：<a href="http://caibaojian.com/toutiao/6859">JavaScript中的this用法与指向</a></p>
<p>参考四：<a href="https://www.zhihu.com/question/19636194">如何理解 JavaScript 中的 this 关键字？</a></p>
</section>
<section>
<h3>8、更多讨论</h3>
<!--<p><a href="http://www.imooc.com/article/1848">资料链接</a></p>-->
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>BY : 钟楚炯</small>
</p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<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>