发表于 | 分类于

webpack 是什么

web开发中常用到的静态资源主要有JavaScript、CSS、图片、pug等文件，webpack中将静态资源文件称之为模块。webpack是一个模块打包工具，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。 官方网站中用下图清晰的描述了webpack采用不同的loader加载不同的资源文件，打包生成多个js文件，也可以根据设置生成独立的图片、css文件等。

阅读全文 »

发表于 | 分类于

前言

对于很多前端开发者而言，JavaScript的原型实在是很让人头疼。
说起原型，那就不得不说prototype、__proto__、constructor三者的关系，其中比较麻烦的就是容易将prototype和__proto__混淆，这也是因为它们之间的指向确实有些复杂。

prototype

每个函数都有一个原型prototype属性，每一个实例对象都会从原型”继承”属性。

阅读全文 »

发表于 | 分类于

原型链继承

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
function Parent() {
    this.names = ['foo', 'bar'];
    this.age = 60;
}
Parent.prototype.greeting = function() {
    console.log("hello!");
}
function Child() {

}

Child.prototype = new Parent();  //将父类实例作为子类原型

var child1 = new Child();

child1.names.push('baz');

console.log(child1.names); // ["foo", "bar", "baz"]

var child2 = new Child();

console.log(child2.names); // ["foo", "bar", "baz"] 

child1.greeting()  //  hello!

var age1 = child1.age = 5
console.log(age1)   //5
console.log(child2.age)   //60  依旧继承父类基本类属性
//修改其中一个实例子类基本类型属性不会影响其他子类基本类型属性
阅读全文 »

发表于 | 分类于

官方概念

作用域(Scope):

javaScript中没有块级作用域、取而代之的使用了函数作用域、即变量在声明它们的函数以及这个函数体嵌套的任意函数体内都是有定义的 –《javaScript权威指南》

作用域链(Scope Chain):

当函数创建时会创建一个包含其父函数变量、父函数的父函数的变量对象、直至全局变量对象的一个作用域链，这个作用域被保存在函数内部的[[scope]]属性中，由于函数本身即是对象，可以理解[[scope]]是后台可以访问的一个属性，不可再JavaScript代码中访问，当函数调用时，会创建一个自己的活动对象、作为变量对象，被推入到执行环境作用域链的最前端，此时这个[[scope]]属性相当于一个变量对象的集合，并有访问的优先级。作用域链并不保存实际的变量对象，它是一个指针，指向内存中的变量对象列表。

阅读全文 »

发表于 | 分类于

前言

与我们常见的很多语言不同，JavaScript 函数中的 this 指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。

JavaScript 中，普通的函数调用方式有三种：直接调用、方法调用和 new 调用。除此之外，还有一些特殊的调用方式，比如通过 bind() 将函数绑定到对象之后再进行调用、通过 call()、apply() 进行调用等。而 es6 引入了箭头函数之后，箭头函数调用时，其 this 指向又有所不同。下面就来分析这些情况下的 this 指向。

阅读全文 »

发表于 | 分类于

浏览器解析JS脚本执行顺序问题

有些朋友可能会觉得JavaScript的代码是从上到下，一行一行的解释执行的。如果按照这样的思路，在有些情况下阅读代码会得到错误的结果，考虑以下代码：

1
2
3
a = 2;
var a;
console.log(a);

阅读全文 »