javascript易错点

函数的this

注意，本文介绍的是javascript，不是nodejs

1
2
3
4
5
6
7
8
let text = 'shit';
function demo(){
	this.text = 'fuck you';
}
console.log(text) // shit
demo(); 
console.log(text) // fuck you

全局变量 window

1
2
3
4
5
6
7
8
9
// 上面的例子实际上等同于
window.text = 'shit';
window.demo = function (){  
	this.text = 'fuck you';
}
console.log(window.text);
window.demo();
console.log(window.text);

因为调用demo方法的是window全局变量 所以这里this指向的是window

1
2
3
//同时
this.text // fuck you

这里的this因为在全局变量window内， 所以也指向window

总结

this指向的是调用它的对象本身

例外

1
2
3
4
5
6
7
8
9
function demo(){
	function child(){
    	console.log(`this is `, this)
    }
    
    child();
}
new demo();

本来这时按逻辑推导输出的是对象（new demo()） ,但是打印出的是window对象。 且当是javascript设计性质， 记住就好。 要解决这个问题 可以

1
2
3
4
5
6
7
function demo(){
	function child(){
    	console.log(`this is `, this)
    }
    
    child.bind(this)();
}

vim执行shell的三种方式

Ctrl-z

属于推荐姿势, 挂起vim,回到执行当前vim的shell，fg命令返回vim

:shell

vim内部开启新的shell session，exit 退出返回vim

:!command

执行单个shell命令， 执行完毕按enter回到vim

vim保存去除^M 

1
2
3
augroup fmt
	autocmd BufWritePre *.ts silent! %s/^M//g|''
augroup END

*.ts 这里匹配了所有ts为后缀的文件

slient! 如果没有匹配到不显示提示

|’’ 替换完返回原先位置

vim

学习一门新的语言的学习顺序

  • 基础语法
  • 了解特性
  • 交互（http请求，数据库应用等）
  • 错误处理机制
  • 缓存机制
  • 进阶语法 （只是让你更快的编程）
  • 更好的组织架构

从es6开始学习javascript

es6之前拒绝学习js的话，目前已经爱上了js

  1. 基础语法 (变量，字符串， 数组， 函数， 对象)
  2. 特性 （set , map , promise & async, symbol, Generator, Decorator, module）
  3. 交互
  4. 错误处理机制 (try…catch , Error)
  5. 理解变量内存地址
  6. 进阶（Reflect ，Proxy）
  7. 学习redux (我认为一个前端程序员对redux的使用的熟练度，和编程思想的应用是直接的技术体现)

javascript 引用

对于javascript不熟悉的同学应该好好认识一下它的引用机制

内存泄漏

关于内存泄漏，请直接复制黏贴搜索文章查看

声明变量存储一个对象的实质

1
2
3
4
5
6
7
8
9
10
11
12
 let a = {
   c: 1,
   b: 2
 };
 let c = a;
 c.c = 3;
 console.log('now a is ', a)
 
//now a is  Object {c: 3, b: 2}

可以看出c变量只是对a变量的引用， 改变c的同时也改变了a。
即它们在内存中存储地址是一致的

仅仅在一个层级上做复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 let a = {
   c: 1,
   b: 2,
   d: {
     e: 1
   }
 };
 let c = {...a};
 c.d.e = 3;
 console.log('now a is ', a)
//e:3

即…运算符只是做了浅拷贝， 并没有做深度拷贝
那么正确的做法是

1
let c = {...a, d: { ...a.d} };

注意 Object.assign 也是浅拷贝类型

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
//demo 1
 let a = {
   c: 1,
   b: 2,
   d: {
     e: 1
   }
 };
 let c = Object.assign({}, a);
 c.b = 5;
 c.d.e = 3;
 console.log('now a is ', a)
// c.b = 2
// c.e = 3
//demo2
 let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
 let b = [...a];
 b[6].c = 2;
 console.log(b);
 console.log(a);
[ 1, 2, 3, 4, 5, 6, { c: 2 } ]
[ 1, 2, 3, 4, 5, 6, { c: 2 } ]

数组的更新

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
 let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
 let b = a;
 b[1] = 20;
 console.log(b);
 console.log(a);
//log
[ 1, 20, 3, 4, 5, 6, { c: 2 } ]
[ 1, 20, 3, 4, 5, 6, { c: 2 } ]
 let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
 let b = a;
 b[1] = 20;
 b = [1, 2, 3, 4];
 console.log(b);
 console.log(a);
//log
[ 1, 2, 3, 4 ]
[ 1, 20, 3, 4, 5, 6, { c: 8 } ]
 let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
 let b = a.slice();
 b[1] = 20;
 b[6].c = 10;
 console.log(b);
 console.log(a);
 
 //log
 
 [ 1, 20, 3, 4, 5, 6, { c: 10 } ]
[ 1, 2, 3, 4, 5, 6, { c: 10 } ]

可见只要是对象那么就需要进行全拷贝

以上在编程过程中一定要注意

javascript内存泄漏问题

javascript主要在于对象引用的使用中产生内存泄漏

如果引用对象被清空后，所有引用都自动清除的话

如:

1
2
3
4
5
6
7
8
9
10
let a = {c :1 }
let c = [a, 'hello world'];
a = null;
console.log(c)
//可以看到结果
[Object, 3]

为了解决这个问题，通常要手动清除该对象

1
c[0] = null;

这是平时编程需要注意到的地方或者可以使用es6中的WeakMap来自动清空

javascript node

搭建angular4 + webpack

官方推荐基础包

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
### mkdir ap && cd ap
wget -O webpack.zip https://angular.cn/resources/zips/webpack/webpack.zip
unzip webpack.zip
npm install
npm i --save-dev html-webpack-plugin style-loader css-loader babel-loader eslint-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-1 babel-plugin-transform-class-properties eslint babel-eslint postcss-loader
npm install --save babel-runtime
### vim src/tsconfig.json
add  "allowJs": true
under  "compilerOptions"
 
 
### vim config/webpack.common.js
### at module.rules add
    {
         enforce: 'pre',
         test: /\.js$/,
         exclude: /(node_modules)/,
         loader: 'eslint-loader',
         options: {}
       },
       {
         test: /\.js$/,
         exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['es2015', 'stage-1'],
             plugins: ['transform-runtime', 'transform-class-properties']
           }
         }
       }
webpack angular4