Skip to content

Commit

Permalink
feat: update articles
Browse files Browse the repository at this point in the history
  • Loading branch information
wx-chevalier committed Jul 11, 2019
1 parent 16cd0e9 commit ff24779
Show file tree
Hide file tree
Showing 28 changed files with 272 additions and 275 deletions.
14 changes: 7 additions & 7 deletions JavaScript/函数/函数声明与闭包.md
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ var b = fun(0)

当我们构造一个提供配置的对象,并且需要这个对象的属性携带默认值时,解构特性就派上用场了。举个例子,jQuery 的`ajax`函数使用一个配置对象作为它的第二参数,我们可以这样重写函数定义:

```javascript
```js
jQuery.ajax = function(
url,
{
Expand All @@ -224,7 +224,7 @@ jQuery.ajax = function(

同样,解构也可以应用在函数的多重返回值中,可以类似于其他语言中的元组的特性:

```javascript
```js
function returnMultipleValues() {
return [1, 2];
}
Expand Down Expand Up @@ -333,7 +333,7 @@ Error: Missing parameter

在 ES5 中,可以用`myFunction = function(){}`的方式来声明一个匿名函数,而 ES6 中,可以用类似于 Lambda 的 Arrow 方式来声明一个匿名表达式。

```javascript
```js
// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
Expand All @@ -347,7 +347,7 @@ nums.forEach(v => {

不过不同于 ES5 中的以 function 关键字声明的方式,Arrow 方式是会与外层共享 this 指针的,其效果如下所示:

```javascript
```js
// Lexical this
var bob = {
_name: "Bob",
Expand Down Expand Up @@ -380,7 +380,7 @@ var bob = {
在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context ),即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。让我们看一个具体的例子:

```javascript
```js
function Point(x, y){
this.x = x;
this.y = y;
Expand Down Expand Up @@ -639,7 +639,7 @@ greet``;

Arrow Function 是 ES6 新增的特性,很类似于 Java 或者 C# 中的 Lambda 表达式。Arrow 函数中的 this 指针在创建时就被绑定到了闭合的作用域内,不会受到 new、bind 、 call 以及 apply 这些方法的影响。

```javascript
```js
var o = {
traditionalFunc: function() {
// Normal function, bound as expected
Expand All @@ -662,7 +662,7 @@ o.arrowFunc();

上述代码中的 arrowFunc 隶属于 o 对象,但是在 window 的作用域中被创建,因此,最终 arrow 函数中的 this 指针的值等于 window 对象。ES5 中的对于 this 的控制已然非常复杂,特别是在处理异步代码中如何传入合适的 this 对象也是一件麻烦事,如下文所示 :

```javascript
```js
var asyncFunction = (param, callback) => {
window.setTimeout(() => {
callback(param);
Expand Down
30 changes: 15 additions & 15 deletions JavaScript/函数/函数调用与 this 绑定.md
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ Function.prototype.bind = function() {
在任何函数之外的全局环境中,不管在不在 strict 模式中,this 指针往往指向一个全局变量。
```javascript
```js
console.log(this.document === document); // true
// In web browsers, the window object is also the global object:
Expand All @@ -253,7 +253,7 @@ console.log(window.a); // 37
在某个函数中,this 的值取决于该函数的调用者。无论是用`hello("world”)`还是 call 这种方式,都取决于传入该函数的对象。不过,在 ES5 的严格或者不严格模式下,同样的调用方式会有不同的结果。
```javascript
```js
function hello(thing) {
console.log('Hello ' + thing);
}
Expand All @@ -267,7 +267,7 @@ hello.call(window, 'world');
而如果是 strict 模式下:
```javascript
```js
// this:
hello('world');
Expand All @@ -279,7 +279,7 @@ hello.call(undefined, 'world');
当某个函数作为事件监听器时,它的 this 值往往被设置为它的调用者。
```javascript
```js
// When called as a listener, turns the related element blue
function bluify(e){
// Always true
Expand All @@ -301,15 +301,15 @@ for(var i=0 i<elements.length i++){
如果是行内的事件监听者,this 指针会被设置为其所在的 DOM 元素:
```javascript
```js
<button onclick="alert(this.tagName.toLowerCase());">Show this</button>
```
## Manual Setting: 手动指定 this
### Closures( 闭包 )
```javascript
```js
var asyncFunction = (param, callback) => {
window.setTimeout(() => {
callback(param);
Expand All @@ -336,7 +336,7 @@ o.doSomething(); // param === this? true
如果将某个方法设置为 Object 的一个属性,并且作为对象方法进行调用时,那么方法中的 this 指针会默认指向该 Object。
```javascript
```js
function hello(thing) {
console.log(this + ' says hello ' + thing);
}
Expand Down Expand Up @@ -412,7 +412,7 @@ fluffybottom.sayHi.call(whiskers); // => whiskers barks excitedly!

其作用可以用下面一个例子进行说明:

```javascript
```js
this.x = 9;
var module = {
x: 81,
Expand All @@ -433,7 +433,7 @@ boundGetX(); // 81
bind 方法在 React 中应用的比较广泛,因为 React 声明方程时往往要绑定到 this 指针上。然而在异步编程中,this 指针极有可能指向错误,譬如:
```javascript
```js
var myObj = {
specialFunction: function() {},

Expand Down Expand Up @@ -485,7 +485,7 @@ bind 方程的支持情况如下:
| Opera | 11.60 |
| Safari | 5.1.4 |
```javascript
```js
var person = {
name: 'Brendan Eich',
hello: function(thing) {
Expand All @@ -509,14 +509,14 @@ fun.bind(thisArg[, arg1[, arg2[, ...]]])
- thisArg 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时,该参数无效。
- arg1, arg2, ... 当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。
```javascript
```js
var boundHello = person.hello.bind(person);
boundHello('world'); // "Brendan Eich says hello world"
```
这种方式在设置回调函数中的 this 指针的时候会起到很大的作用,特别是在 React 中,为了保证指针的稳定性,往往需要为内置方法设置 bind。
```javascript
```js
var person = {
name: 'Alex Russell',
hello: function() {
Expand All @@ -529,7 +529,7 @@ $('#some-div').click(person.hello.bind(person));
// when the div is clicked, "Alex Russell says hello world" is printed
```
```javascript
```js
var asyncFunction = (param, callback) => {
window.setTimeout(() => {
callback(param);
Expand All @@ -556,7 +556,7 @@ o.doSomething(); // param === this? true
还有一个类似的实例是 array.forEach,在这样一个回调函数中,回调函数的 this 指针是由调用者决定的,完整的 forEach 声明如下:**array.forEach(callback[, thisArg])**,这个传入的 thisArg 即是回调的调用者。
```javascript
```js
var o = {
v: 'hello',
p: ['a1', 'a2'],
Expand All @@ -576,7 +576,7 @@ o.f();
在 ECMAScript 中使用 Arrow Function 时候,会在创建该 Function 的时候即在创建时就被绑定到了闭合的作用域内,不会收到 new、bind 、 call 以及 apply 这些方法的影响。
```javascript
```js
var asyncFunction = (param, callback) => {
window.setTimeout(() => {
callback(param);
Expand Down
6 changes: 3 additions & 3 deletions JavaScript/函数/装饰器.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,18 @@ class DemoComponent {
@timeout()
demoMethod() {
// This code will run at the next tick...
console.log("0 ms Later");
console.log('0 ms Later');
}

// With a number
@timeout(2000)
demoMethod() {
// This code will run at the next tick...
console.log("2000 ms Later");
console.log('2000 ms Later');
}
}

new DemoComponent().demoMethod();

console.log("Main Process...");
console.log('Main Process...');
```
2 changes: 1 addition & 1 deletion JavaScript/函数式编程/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ var config = $.extend(true, {}, defaultConfig, initConfig); // 如果对象是


```javascript
```js
var stateV1 = Immutable.fromJS({
users: [{ name: 'Foo' }, { name: 'Bar' }]
});
Expand Down
6 changes: 3 additions & 3 deletions JavaScript/变量操作/作用域与提升.md
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ function getPi() {

变量提升只对 var 命令声明的变量有效,如果一个变量不是用 var 命令声明的,就不会发生变量提升。

```javascript
```js
console.log(b);
b = 1;
```
Expand Down Expand Up @@ -331,7 +331,7 @@ console.log(hello);

为了避免全局变量,第一件事情就是要确保所有的代码都被包在函数中。最简单的办法就是把所有的代码都直接放到一个函数中去 :

```
```js
(function(win) {
    "use strict"// 进一步避免创建全局变量
    var doc = window.document;
Expand All @@ -342,7 +342,7 @@ console.log(hello);

## 声明命名空间

```javascript
```js
var MyApp = {
namespace: function(ns) {
var parts = ns.split('.'),
Expand Down
24 changes: 11 additions & 13 deletions JavaScript/变量操作/声明与赋值.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
[![返回目录](https://i.postimg.cc/KvQbty96/image.png)](https://url.wx-coder.cn/lrKga)

> [ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解](https://zhuanlan.zhihu.com/p/28508795)归纳于笔者的[现代 JavaScript 开发:语法基础与实践技巧](https://parg.co/bjK)系列文章。本文首先介绍 ES6 中常用的三种变量声明方式,然后讨论了 JavaScript 按值传递的特性,最后介绍了复合类型拷贝的技巧;有兴趣的可以阅读下一章节 [ES6 变量作用域与提升:变量的生命周期详解](https://zhuanlan.zhihu.com/p/28494566)
# 变量声明与赋值

ES6 为我们引入了 let 与 const 两种新的变量声明关键字,同时也引入了块作用域;本文首先介绍 ES6 中常用的三种变量声明方式,然后讨论了 JavaScript 按值传递的特性以及多种的赋值方式,最后介绍了复合类型拷贝的技巧。如果 x,y 皆为 Object,则进行 Reference 比较;譬如 [] == [](false)
Expand Down Expand Up @@ -114,7 +112,7 @@ k:2

`const` 关键字一般用于常量声明,用 `const` 关键字声明的常量需要在声明时进行初始化并且不可以再进行修改,并且 `const` 关键字声明的常量被限制于块级作用域中进行访问。

```javascript
```js
function f() {
{
let x;
Expand Down Expand Up @@ -512,22 +510,22 @@ var users = [

而且你还可以通过 “[不定参数](http://www.infoq.com/cn/articles/es6-in-depth-rest-parameters-and-defaults)” 模式捕获数组中的所有尾随元素:

```javascript
```js
var [head, ...tail] = [1, 2, 3, 4];
console.log(tail); // [2, 3, 4]
```

当访问空数组或越界访问数组时,对其解构与对其索引的行为一致,最终得到的结果都是:`undefined`

```javascript
```js
console.log([][0]); // undefined
var [missing] = [];
console.log(missing); // undefined
```

请注意,数组解构赋值的模式同样适用于任意迭代器:

```javascript
```js
function* fibs() {
var a = 0;
var b = 1;
Expand All @@ -544,7 +542,7 @@ console.log(sixth); // 5

通过解构对象,你可以把它的每个属性与不同的变量绑定,首先指定被绑定的属性,然后紧跟一个要解构的变量。

```javascript
```js
var robotA = { name: 'Bender' };
var robotB = { name: 'Flexo' };
var { name: nameA } = robotA;
Expand All @@ -555,15 +553,15 @@ console.log(nameB); // "Flexo"

当属性名与变量名一致时,可以通过一种实用的句法简写:

```javascript
```js
var { foo, bar } = { foo: 'lorem', bar: 'ipsum' };
console.log(foo); // "lorem"
console.log(bar); // "ipsum"
```

与数组解构一样,你可以随意嵌套并进一步组合对象解构:

```javascript
```js
var complicatedObj = {
arrayProp: ['Zapp', { second: 'Brannigan' }]
};
Expand Down Expand Up @@ -600,7 +598,7 @@ console.log(second); // "Brannigan"

当你要解构的属性未定义时你可以提供一个默认值:

```javascript
```js
var [missing = true] = [];
console.log(missing); // true
var { message: msg = 'Something went wrong' } = {};
Expand All @@ -611,15 +609,15 @@ console.log(x); // 3

由于解构中允许对对象进行解构,并且还支持默认值,那么完全可以将解构应用在函数参数以及参数的默认值中。

```javascript
```js
function removeBreakpoint({ url, line, column }) {
// ...
}
```

当我们构造一个提供配置的对象,并且需要这个对象的属性携带默认值时,解构特性就派上用场了。举个例子,jQuery 的`ajax`函数使用一个配置对象作为它的第二参数,我们可以这样重写函数定义:

```javascript
```js
jQuery.ajax = function(
url,
{
Expand All @@ -637,7 +635,7 @@ jQuery.ajax = function(

同样,解构也可以应用在函数的多重返回值中,可以类似于其他语言中的元组的特性:

```javascript
```js
function returnMultipleValues() {
return [1, 2];
}
Expand Down
4 changes: 2 additions & 2 deletions JavaScript/变量操作/拷贝.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ console.log(tomorrow);

不过需要注意的是,assign 是浅拷贝,或者说,它是一级深拷贝,举两个例子说明:

```javascript
```js
const defaultOpt = {
title: {
text: 'hello world',
Expand Down Expand Up @@ -79,7 +79,7 @@ console.log(opt);

上面这个例子中,对于对象的一级子元素而言,只会替换引用,而不会动态的添加内容。那么,其实 assign 并没有解决对象的引用混乱问题,参考下下面这个例子:

```javascript
```js
const defaultOpt = {
title: {
text: 'hello world',
Expand Down
Loading

0 comments on commit ff24779

Please sign in to comment.