-
JS：深浅拷贝
我们先来看下数组的拷贝，通常我们会用slice() concat()方法实现数组拷贝：var arr = [1, 2, 3, 4, 5];var arr1 = arr.concat();var arr2 = arr.slice();console.log(arr1); //[1, 2, 3, 4, 5]console.log(arr2); //[1, 2, 3, 4, 5]slice() concat()都是返回了一个新数组，没有改变原来的数组，看起来像是深拷贝。我们再来看一个例子：var...…
-
Angular：动态创建Form表单
在web应用里通常会有这样一种场景：比如支付宝信用卡还款，假设支付宝收费标准如下： 普通用户，2000元以内免费，2000-50000收费10元，50000元以上收费15元。 砖石会员，5000元以内免费，5000-50000收费5元，50000元以上收费10元。现在需要做一个页面，用来专门用来收集这样的收费标准，以后可能需要增加新的收费标准或者修改现有的收费标准。这个页面可以设计成这样：在angular用dynamic form可以很容易实现这种动态加载表单的效果，并且可以轻松实现对...…
-
JS：let和const
在JS中用var声明变量存在变量提升，比如：if (false) { var a = 1;}console.log(a);//undefined这段代码输出的是undefined，而不是ReferenceError。这是因为var有变量提升，实际这段代码相当于：var a;if (false) { a = 1;}console.log(a);//undefined还有在for循环中：var result = [];for (var i = 0; i < 5; i++) {...…
-
JS：深入理解JavaScript-继承
在文章【JS：深入理解JavaScript-原型】详细介绍了原型和new Object.create()在创建对象和实现继承的区别。JS的继承是基于原型（prototype）实现的，再理解原型之后，就很容易理解JS的继承方式了。在这篇文章里将会详细介绍6中常见的JS继承方式。1. 原型继承function Animal() { this.category = "category";}Animal.prototype.getCategory = function () { con...…
-
JS：深入理解JavaScript-原型
在这篇文章里会介绍如下内容： 什么是原型和原型链 prototype 和__proto__有什么区别 new 和Object.create()创建对象和实现继承的区别原型在JS中每个函数都有一个prototype属性，它实际指向的是一个prototype对象，比如有一个函数Foo，我们来看下Foo.prototype这个对象里到底有什么：function Foo() {}Foo.prototype.name = "mei";console.log(Foo.prototype);输出结...…
-
JS：深入理解JavaScript-闭包
在文章【JS：深入理解JavaScript-执行上下文】中介绍了代码在执行栈是如何运行的，假设有如下代码：function foo() { var a = 2; function bar() { console.log(a); } bar();}foo()引擎在执行这段代码的步骤如下： 1：创建一个新的执行上下文（Execution Context） 2：创建一个新的词法环境（Lexical Environment） 3：把LexicalEnvi...…
-
JS：深入理解JavaScript-this
在上一篇文章【JS：深入理解JavaScript-执行上下文】中介绍了执行上下文是如何工作的。在这篇文章里会介绍执行上下文中的ThisBinding，也就是JavaScript中的this。有四种可执行代码可以创建执行上下文，分别是global code function code module和eval code。接下来分别介绍这global code function code可执行代码中的this（ThisBinding）到底指的是什么。global code的this在JS引擎运行...…
-
JS：深入理解JavaScript-函数
JavaScript中定义函数有这几种方式： 函数声明 函数表达式 立即执行函数 new Funcion(arg1,arg2…,argn,body)创建函数。定义函数的方式不同，它们的词法环境会不一样，作用域链也不一样。函数声明我们来看一个函数声明的例子：var a = 2;function foo() { console.log(a); // 2}function bar() { var a = 3; foo();}bar();在文章【JS：深入理解JavaSc...…
-
JS：深入理解JavaScript-执行上下文
在上一篇文章【JS：深入理解JavaScript-词法环境】详细介绍了词法环境，它是在V8引擎词法分析阶段用来登记变量的，这样在引擎真正执行代码的时候，就知道去哪里拿变量的值。也提到过，每次执行回调函数的时候，会把方法以执行上下文（Execution Context）的方式压入执行栈（Call Stack），执行完以后会被弹出执行栈。比如有代码：var a;function foo() { a = "hi, i am foo"; console.log(a);}function...…
-
JS：深入理解JavaScript-词法环境
在文章【JS：详解Event Loop运行机制，以及microtasks和macrotask的执行顺序】这篇文章中简单介绍了Call Stack（调用栈），在JS中所有代码都是在调用栈中执行的，遵循后进先出的原则。在了解Event Loop和调用栈的运行机制之后，仔细想了一下又觉得很疑惑: 只有function可以被压入调用栈执行吗？ JS引擎在执行代码时，是从哪里找到要引用的变量值，函数调用又是怎么找到对应的函数的呢？ 图中每个蓝色的方块代表一个function？在调用栈里是什么？...…