-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathjs_prototype.html
More file actions
212 lines (182 loc) · 14.8 KB
/
Copy pathjs_prototype.html
File metadata and controls
212 lines (182 loc) · 14.8 KB
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
<!doctype html>
<html lang="zh-CN" class="night">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=0" name="viewport">
<title>Ede's Blog</title>
<meta name="description" content="Try to be a qualified programmer">
<meta property="og:type" content="website">
<meta property="og:description" content="Try to be a qualified programmer">
<meta property="og:title" content="Ede's Blog">
<meta property="og:site_name" content="Ede's Blog">
<meta property="og:url" content="https://ede.ink">
<meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="mainfest" href="/mainfest.json">
<link rel="stylesheet" href="/public/css/common.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css">
<script>
// 是否需要切换黑夜模式（此JS应在CSS加载前执行，否则会造成页面闪烁）
(function toggleNightOrDay() {
var isForceNightTheme = window.location.search.indexOf('theme=night') !== -1
|| window.localStorage.getItem('edeity-theme_theme') === 'night';
var isForceLightTheme = window.location.search.indexOf('theme=light') !== -1
|| window.localStorage.getItem('edeity-theme_theme') === 'light';
var hours = new Date().getHours();
hours = 22;
var html = document.querySelector('html')
if (isForceNightTheme) {
html.classList.add('night');
} else if (isForceLightTheme) {
html.classList.remove('night');
} else {
// 没有强制开关，用时间计算
if (hours < 8 || hours >= 20) {
html.classList.add('night');
} else {
html.classList.remove('night');
}
}
})();
// 切换暗夜模式，需要在CSS渲染前调整，否则重绘时会闪烁
document.addEventListener('DOMContentLoaded', function () {
// 是否需要隐藏左侧导航栏
if (document.querySelector('ol.toc') !== null) {
var bar = document.querySelector('#nav-bar')
bar.style.cssText = 'display: block'
}
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-M3J9QSEE2Z');
</script>
<meta name="generator" content="Hexo 7.3.0"></head>
<body>
<div class="loading"></div>
<div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div>
<header class="fullscreen">
<div class="toolbar">
<i class="iconfont icon-menu"></i>
</div>
<h1>
<a href="/">Ede's Blog</a>
</h1>
<div class="head-link">
<a class="btn waves" href="/">
<span>
<i class="iconfont icon-home">
Home
</i>
</span>
</a>
<a class="btn waves" href="/about/index.html">
<span>
<i class="iconfont icon-me">
About
</i>
</span>
</a>
<a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink">
<span>
<i class="iconfont icon-github">
Github
</i>
</span>
</a>
</div>
</header>
<div class="some-link">
<a class="btn" id="light-or-not">
<i class="iconfont icon-light"></i>
</a>
<a style="display: none;" class="btn" id="up-to-top">
<i class="iconfont icon-up"></i>
</a>
</div>
<div id="nav-bar" style="display: none">
<div class="toc">
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E5%8E%9F%E5%9E%8B%E9%93%BE%E7%9A%84%E6%80%9D%E8%80%83"><span class="toc-number">1.</span> <span class="toc-text">关于原型链的思考</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E6%9E%90"><span class="toc-number">2.</span> <span class="toc-text">解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%A7%E8%A1%8C%E5%89%8D%E7%9A%84%E5%8E%9F%E5%9E%8B%E7%8A%B6%E6%80%81"><span class="toc-number">2.1.</span> <span class="toc-text">执行前的原型状态</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#new%E5%85%B3%E9%94%AE%E5%AD%97%E6%89%80%E8%B5%B7%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-number">2.2.</span> <span class="toc-text">new关键字所起的作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%A7%E8%A1%8C%E5%89%8D%E5%90%8E%E7%9A%84%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%8F%98%E5%8C%96"><span class="toc-number">2.3.</span> <span class="toc-text">执行前后的原型链变化</span></a></li></ol></li></ol>
</div>
</div>
<main id="content-main" class="section">
<div class="list-item">
<h1 class="post-title">
<a id="理解Function和Object的原型关系" class="article-link" href="">
理解Function和Object的原型关系
</a>
</h1>
<div class="post-meta">
<time class="meta published">
Nov 9, 2015
</time>
</div>
<!-- 文章声明 -->
<div class="article">
<div class="post-excerpt markdown-body">
<p>源于某道js笔试题</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//题目</span></span><br><span class="line"><span class="keyword">var</span> foo = {}</span><br><span class="line"><span class="keyword">var</span> F = <span class="keyword">function</span>(<span class="params"></span>){}</span><br><span class="line"><span class="keyword">var</span> f = <span class="keyword">new</span> <span class="title function_">F</span>()</span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">a</span> = <span class="keyword">function</span>(<span class="params"></span>){}</span><br><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">b</span> = <span class="keyword">function</span>(<span class="params"></span>){}</span><br><span class="line"></span><br><span class="line"><span class="comment">//每次调用以下一个方法,哪些方法会报错</span></span><br><span class="line">foo.<span class="title function_">a</span>()</span><br><span class="line">foo.<span class="title function_">b</span>()</span><br><span class="line">F.<span class="title function_">a</span>()</span><br><span class="line">F.<span class="title function_">b</span>()</span><br><span class="line">f.<span class="title function_">a</span>()</span><br><span class="line">f.<span class="title function_">b</span>()</span><br></pre></td></tr></table></figure>
<p>答案：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// foo.a(), F.a(), F.b(), f.a()调用成功</span></span><br><span class="line"><span class="comment">// foo.b(), F.b()调用失败</span></span><br><span class="line">foo.<span class="title function_">a</span>() <span class="comment">//=> </span></span><br><span class="line">foo.<span class="title function_">b</span>() <span class="comment">//=> TypeError: foo.b is not a function</span></span><br><span class="line">F.<span class="title function_">a</span>() <span class="comment">//=></span></span><br><span class="line">F.<span class="title function_">b</span>() <span class="comment">//=></span></span><br><span class="line">f.<span class="title function_">a</span>() <span class="comment">//=></span></span><br><span class="line">f.<span class="title function_">b</span>() <span class="comment">//=> TypeError: f.b is not a function</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="关于原型链的思考"><a href="#关于原型链的思考" class="headerlink" title="关于原型链的思考"></a>关于原型链的思考</h2><p>JS中，一个 <strong>变量</strong> 或 <strong>方法</strong> 的搜索是基于原型链的，如：<code>a.b()</code>，其伪代码：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 假设a自能调用自身方法，a.b()类似于</span></span><br><span class="line"><span class="keyword">while</span>(a !== <span class="literal">null</span>) {</span><br><span class="line"> a.<span class="title function_">hasOwnProperty</span>(b) ? a.<span class="title function_">b</span>() : a = a.<span class="property">__proto__</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>为此，有句调侃javascript的话</p>
<blockquote>
<p>万物皆源于无（null）</p>
</blockquote>
<h2 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h2><p>要理解这道题目，最基本的思路在于：<strong>弄懂代码执行后，原型链的状态</strong></p>
<p>关键点又有两点</p>
<ol>
<li><strong>执行前</strong>的原型链状态</li>
<li><strong>new</strong>关键字的作用</li>
</ol>
<h3 id="执行前的原型状态"><a href="#执行前的原型状态" class="headerlink" title="执行前的原型状态"></a>执行前的原型状态</h3><p>es规范：请参考下面代码</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="property">__proto__</span> === <span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>; <span class="comment">//=>true</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property">__proto__</span> === <span class="title class_">Function</span>.<span class="property">__proto__</span>; <span class="comment">//=>true</span></span><br><span class="line"><span class="title class_">Function</span>.<span class="property">__proto__</span>.<span class="property">__proto__</span> === <span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>; <span class="comment">//=>true</span></span><br><span class="line"><span class="title class_">Function</span>.<span class="property">__proto__</span>.<span class="property">__proto__</span>.<span class="property">__proto__</span> === <span class="literal">null</span>; <span class="comment">//=>true</span></span><br></pre></td></tr></table></figure>
<h3 id="new关键字所起的作用"><a href="#new关键字所起的作用" class="headerlink" title="new关键字所起的作用"></a>new关键字所起的作用</h3><ul>
<li><p>一般地:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="title function_">A</span>()</span><br><span class="line"></span><br><span class="line"><span class="comment">//类似于</span></span><br><span class="line"><span class="keyword">var</span> a = {}</span><br><span class="line">a.<span class="property">__proto__</span> = A.<span class="property"><span class="keyword">prototype</span></span></span><br><span class="line">A.<span class="property"><span class="keyword">prototype</span></span>.<span class="title function_">call</span>(a) <span class="comment">//该句并不影响原型关系，可暂时忽略</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>对于<code>new Function</code>，则存在一点不同</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> f = <span class="keyword">function</span>(<span class="params"></span>){} <span class="comment">//或var f = new Function()</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//类似于 </span></span><br><span class="line"><span class="keyword">var</span> f = {}</span><br><span class="line">f.<span class="property">__proto__</span> = <span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span></span><br><span class="line">f.<span class="property"><span class="keyword">prototype</span></span> = {} <span class="comment">// 独有</span></span><br><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="title function_">call</span>(f）</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="执行前后的原型链变化"><a href="#执行前后的原型链变化" class="headerlink" title="执行前后的原型链变化"></a>执行前后的原型链变化</h3><ul>
<li>执行前（图1）<br><img src="https://edeity.oss-cn-shenzhen.aliyuncs.com/2015/closure-before.jpg" alt="执行前"></li>
<li>执行后（图2）<br><img src="https://edeity.oss-cn-shenzhen.aliyuncs.com/2015/closure-before.jpg" alt="执行后"></li>
</ul>
<p>由图，可以很轻易得出</p>
<ul>
<li><code>foo.a()</code>会被调用成功</li>
<li><code>foo.b()</code>会报错</li>
</ul>
</div>
</div>
</div>
<div class="more section">
<div class="pre">
<a class="article-link" href="/learn_react_by_code_a_mou.html">
<i class="iconfont icon-right"></i>
<span>React初探：写一个“mou”</span>
</a>
</div>
<div class="next">
<a class="article-link" href="/use_ali_cloud.html">
阿里云搭建wordpress记
<i class="iconfont icon-right"></i>
</a>
</div>
</div>
</main>
</body>
<footer class="section fullscreen">
<div class="footer-desc">
Edeink © 2015-2025 · Powered by Hexo
</div>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!--<script src="https://lab.hakim.se/zoom-js/js/zoom.js"></script>-->
<script src="/public/js/init.js"></script>
</html>