深刻认知 JavaScript
本文当时写在本地，发现换电脑很不是方便，在这里记录下。javascript
深刻认知 Javascript
:zero: 前言
关于 Javascript，平时咱们仅仅作到了使用，可是真的理解为何这么使用吗？html
这里详细介绍一些咱们经常使用的 Javascript 语法。java
:one: 关键字
what: 在Javascript 关键字是有不少的，而普通的关键字基本没有太多的难度，例如var，eval，void，break...，这里仅仅挑选两个 this 和 new 也是最让人疑惑的关键字。数组
1.1 this
在 Javascript6.0 如下，Javascript是没有块级做用域的，只有函数做用域。而若是在做用域中嵌套做用域，那么就会有做用域链。浏览器
foo = "window";
function first(){
var foo = "first";
function second(){
var foo = "second";
console.log(foo);
}
function third(){
console.log(foo);
}
second(); //second
third(); //first
}
first();
复制代码
:exclamation: 理解：当执行second时，JS引擎会将second的做用域放置链表的头部，其次是first的做用域，最后是window对象，因而会造成以下做用域链：second->first->window, 此时，JS引擎沿着该做用域链查找变量foo, 查到的是 second。当执行third时，third造成的做用域链：third->first->window, 所以查到的是：frist。安全
弄清楚做用域，咱们在来看 this 关键字，Javascript 中的 this 老是指向当前函数的全部者对象，this老是在运行时才能肯定其具体的指向, 也才能知道它的调用对象app
window.name = "window";
function f(){
console.log(this.name);
}
f();//window
var obj = {name:'obj'};
f.call(obj); //obj
复制代码
:exclamation: 理解：在执行f()时，此时f()的调用者是window对象，所以输出 window ，f.call(obj) 是把f()放在obj对象上执行，至关于obj.f(),此时f 中的this就是obj,因此输出的是 obj函数
Demo 1性能
var foo = "window";
var obj = {
foo : "obj",
getFoo : function() {
return function() {
return this.foo;
};
}
};
var f = obj.getFoo();
f();
复制代码
**Demo 2 **测试
var foo = "window";
var obj = {
foo : "obj",
getFoo : function() {
var that = this;
return function(){
return that.foo;
};
}
};
var f = obj.getFoo();
f();
复制代码
❓ Demo1 和 Demo2 的返回值是多少
:exclamation: 代码解析：
// demo1:
//执行var f = obj.getFoo()返回的是一个匿名函数，至关于:
var f = function(){
return this.foo;
}
// f() 至关于window.f(), 所以f中的this指向的是window对象，this.foo至关于window.foo, 因此f()返回"window"
// demo2:
// 执行var f = obj.getFoo() 一样返回匿名函数，即：
var f = function(){
return that.foo;
}
// 惟一不一样的是f中的this变成了that, 要知道that是哪一个对象以前，先肯定f的做用域链：f->getFoo->window 并在该链条上查找that,
// 此时能够发现that指代的是getFoo中的this, getFoo中的this指向其运行时的调用者，
// 从var f = obj.getFoo() 可知此时this指向的是obj对象，所以that.foo 就至关于obj.foo,因此f()返回 "obj"
复制代码
1.2 new
what: 和其余高级语言同样 Javascript 中也有 new 运算符，咱们知道 new 运算符是用来实例化一个类，从而在内存中分配一个实例对象。 但在 Javascript 中，万物皆对象，为何还要经过 new 来产生对象
1.2.1 认识
先看一个例子
01 function Animal(name){
02 this.name = name;
03 }
04 Animal.color = "black";
05 Animal.prototype.say = function(){
06 console.log("I'm " + this.name);
07 };
08 var cat = new Animal("cat");
09
10 console.log(
11 cat.name, //cat
12 cat.height //undefined
13 );
14 cat.say(); //I'm cat
15
16 console.log(
17 Animal.name, //Animal
18 Animal.color //back
19 );
20 Animal.say(); //Animal.say is not a function
复制代码
:exclamation: 代码解析：
:small_blue_diamond: 1-3行建立了一个函数 Animal，并在其 this 上定义了属性 name，name的值是函数被执行时的形参。
:small_blue_diamond: 4行在 Animal 对象（Animal 自己是一个函数对象）上定义了一个静态属性 color，并赋值“black”
:small_blue_diamond: 5-7行在 Animal 函数的原型对象 prototype 上定义了一个 say 方法，say 方法输出了 this.name。
:small_blue_diamond: 8行经过 new 关键字建立了一个新对象 cat。
:small_blue_diamond: 10-14行 cat 对象尝试访问 name 和 color 属性，并调用 say 方法。
:small_blue_diamond: 16-20行 Animal 对象尝试访问 name 和 color 属性，并调用 say 方法。
:exclamation: 重点解析：
注意到第 8 行，
var cat = new Animal("cat");
复制代码
JS引擎执行这句代码时，在内部作了不少工做，用伪代码模拟其工做流程以下：
new Animal("cat") = {
var obj = {};
obj.__proto__ = Animal.prototype;
var result = Animal.call(obj, "cat");
return typeof result === 'object'? result : obj;
}
复制代码
:exclamation: 代码解析：
:small_blue_diamond: 建立一个空对象obj;
:small_blue_diamond: 把obj 的 __proto__ 指向 Animal 的原型对象 prototype，此时便创建了 obj 对象的原型链：
obj :arrow_right: Animal.prototype :arrow_right: Object.prototype :arrow_right: null
简单解释下原型对象和原型链：
- 原型对象：指给后台函数继承的父对象
- 原型链：连接成 java 的继承
🔹 在obj对象的执行环境调用Animal函数并传递参数cat。 至关于var result = obj.Animal("cat")。 当这句执行完以后，obj便产生了属性name并赋值为cat。
简单解释下 call 和 apply：
相同：调用一个对象的一个方法，用另外一个对象替换当前对象。
- B.call(A, args1,args2); 即A对象调用B对象的方法。
- B.apply(A, arguments); 即A对象应用B对象的方法
不一样: 二者传入的列表形式不同
- call能够传入多个参数
- apply只能传入两个参数，因此其第二个参数每每是做为数组形式传入
🔹 考察第3步返回的返回值，若是无返回值或者返回一个非对象值，则将obj返回做为新对象；不然会将返回值做为新对象返回。
❗️ 深刻解析：
理解new的运行机制之后，咱们知道cat其实就是过程（4）的返回值，所以咱们对cat对象的认知就多了一些：
cat的原型链是： cat :arrow_right: Animal.prototype :arrow_right: Object.prototype :arrow_right: null
cat上新增了一个属性：name
分析完了cat的产生过程，咱们再看看输出结果：
🔹 cat.name -> 在过程（3）中，obj对象就产生了name属性。所以cat.name就是这里的obj.name
🔹 cat.color -> cat会先查找自身的color，没有找到便会沿着原型链查找，在上述例子中，咱们仅在Animal对象上定义了color,并无在其原型链上定义，所以找不到。
🔹 cat.say -> cat会先查找自身的say方法，没有找到便会沿着原型链查找，在上述例子中，咱们在Animal的prototype上定义了say,所以在原型链上找到了say方法。
另外，在say方法中还访问this.name，这里的this指的是其调用者obj,所以输出的是obj.name的值。
对于Animal来讲，它自己也是一个对象，所以，它在访问属性和方法时也遵照上述查找规则，因此：
🔹 Animal.color -> "black"
🔹 Animal.name -> "Animal" , Animal先查找自身的name, 找到了name，注意：但这个name不是咱们定义的name,而是函数对象内置的属性。通常状况下，函数对象在产生时会内置name属性并将函数名做为赋值（仅函数对象）。
🔹 Animal.say -> Animal在自身没有找到say方法，也会沿着其原型链查找，话说Animal的原型链是什么呢？
从测试结果看：Animal的原型链是这样的：
Animal :arrow_right: Function.prototype :arrow_right: Object.prototype :arrow_right: null
所以Animal的原型链上没有定义say方法！
1.2.2 存在的意义
以前提到js中，万物皆对象，为何还要经过new来产生对象？要弄明白这个问题，咱们首先要搞清楚cat和Animal的关系。
经过上面的分析，咱们发现cat继承了Animal中的部分属性，所以咱们能够简单的理解：Animal和cat是继承关系。
另外一方面，cat是经过new产生的对象，那么cat究竟是不是Animal的实例对象？ 咱们先来了解一下JS是如何来定义“实例对象”的？
A instanceof B
复制代码
若是上述表达式为true,JS认为A是B的实例对象，咱们用这个方法来判断一下cat和Animal
var isInstance = cat instanceof Animal; //true
复制代码
❗️ 代码解析：
cat 确实是 Animal 实例，要想证明这个结果，咱们再来了解一下JS中 instanceof 的判断规则：
var L = A.proto;
var R = B.prototype;
console.log(L === R);
复制代码
在new的执行过程当中，cat的__proto__指向了Animal的prototype，因此cat和Animal符合instanceof的判断结果。所以，咱们认为：cat是Animal的实例对象。
1.2.3 总结
在javascript中, 经过new能够产生原对象的一个实例对象，而这个实例对象继承了原对象的属性和方法。所以，new存在的意义在于它实现了javascript中的继承，而不只仅是实例化了一个对象！
:two: 高级函数
what: 在Javascript中，对象分普通对象和函数对象，普通的常见，这里不作说明。提及 Javascript的函数，十分强大。它们是第一类对象，也能够做为另外一个对象的方法，还能够做为参数传入另外一个函数，不只如此，还能被一个函数返回！能够说，在JS中，函数无处不在，无所不能。
why: 除了函数相关的基础知识外，掌握一些高级函数并应用起来，不只能让JS代码看起来更为精简，还能够提高性能。
2.1 安全构造函数
常规写法：
function Person(name,age){
this.name = name;
this.age = age;
}
var p1 = new Person("Claiyre",80);
复制代码
可是，若是忘记加new了会发生什么？
var p3 = Person("Tom",30);
console.log(p3); //undefined
console.log(window.name); //Tom
复制代码
因为使用了不安全的构造函数，上面的代码意外的改变了window的name，由于this对象是在运行时绑定的，使用new调用构造函数时this是指向新建立的对象的，不使用new时，this是指向window的。 因为window的name属性是用来识别连接目标和frame的，所在这里对该属性的偶然覆盖可能致使其余错误。
做用域安全的构造函数会首先确认this对象是正确类型的实例，而后再进行更改，以下：
function Person(name,age){
if(this instanceof Person){
this.name = name;
this.age = age;
} else {
return new Person(name,age);
}
}
复制代码
:pushpin: 做用：避免了在全局对象上意外更改或设置属性。 在多人协做的项目中，为了不他们误改了全局对象，使用做用域安全的构造函数会更好。
2.2 惰性载入函数
因为浏览器间的行为差别，代码中可能会有许多检测浏览器行为的if语句。但用户的浏览器若支持某一特性，便会一直支持，因此这些if语句，只用被执行一次，即使只有一个if语句的代码，也比没有要快。 惰性载入表示函数执行的分支仅会执行一次，有两种实现惰性载入的方式
第一种就是在函数第一次被调用时再处理函数，用检测到的结果重写原函数。
function detection(){
if(//支持某特性){
detection = function(){
//直接用支持的特性
}
} else if(//支持第二种特性){
detection = function(){
//用第二种特性
}
} else {
detection = function(){
//用其余解决方案
}
}
}
复制代码
第二种实现惰性载入的方式是在声明函数时就指定适当的函数
var detection = (function(){
if(//支持某特性){
return function(){
//直接用支持的特性
}
} else if(//支持第二种特性){
return function(){
//用第二种特性
}
} else {
return function(){
//用其余解决方案
}
}
})();
复制代码
📌 做用：惰性载入函数的有点是在只初次执行时牺牲一点性能，以后便不会再有多余的消耗性能 。
2.3 函数绑定做用域
在JS中，函数的做用域是在函数被调用时动态绑定的，也就是说函数的
this对象的指向是不定的，但在一些状况下，咱们须要让某一函数的执行做用域固定，老是指向某一对象。这时能够用函数绑定做用域函数。
function bind(fn, context){
return function(){
return fn.apply(context, arguments);
}
}
复制代码
// 具体一点
var person1 = {
name: "claiyre",
sayName: function(){
alert(this.name);
}
}
var sayPerson1Name = bind(person1.sayName, person1);
sayPerson1Name(); // claiyre
复制代码
📌 做用：函数的this对象固定，老是指向某一对象
2.4 函数柯里化
只传递部分参数来调用函数，而后让函数返回另外一个函数去处理剩下的参数。能够理解为赋予了函数“加载”的能力。
// 较为简单的实现curry的方式
function curry(fn){
var i = 0;
var outer = Array.prototype.slice.call(arguments,1);
var len = fn.length;
return function(){
var inner = outer.concat(Array.prototype.slice.call(arguments));
return inner.length === len?fn.apply(null,inner) : function (){
var finalArgs = inner.concat(Array.prototype.slice.call(arguments));
return fn.apply(null,finalArgs);
}
}
}
// 一旦函数通过柯里化，咱们就能够先传递部分参数调用它，而后获得一个更具体的函数。
var match = curry(function(what,str){
return str.match(what)
});
var hasNumber = match(/[0-9]+/g);
var hasSpace = match(/\s+/g)
hasNumber("123asd"); // ['123']
hasNumber("hello world!"); // null
hasSpace("hello world!"); // [' '];
hasSpace("hello"); // null
console.log(match(/\s+/g,'i am Claiyre')); // 直接所有传参也可： [' ',' ']
复制代码
📌 做用：逐步的具体化函数，最后获得结果
2.5 debounce函数 (去抖函数)
当函数被调用时，不当即执行相应的语句，而是等待固定的时间w,若在w时间内，即等待还未结束时，函数又被调用了一次，则再等待w时间，重复上述过程，直到最后一次被调用后的w时间内该函数都没有被再调用，则执行相应的代码。
var myFunc = debounce(function(){
// 繁重、耗性能的操做
}，250); // 函数节流
window.addEventListener('resize',myFunc);
复制代码
📌 做用：防止某一函数被连续调用，从而致使浏览器卡死或崩溃
2.6 once函数
function once(fn){
var result;
return function(){
if(fn){
result = fn(arguments);
fn = null; // 在被执行过一次后,参数fn就被赋值null了，那么在接下来被调用时，便不再会进入到if语句中了，也就是第一次被调用后，该函数永远不会被执行了。
}
return result;
}
}
var init = once(function(){
// 初始化操做
})
复制代码
📌 做用：仅仅会被执行一次的函数 ，防止过多的污染
:clap: 结语
Javascript 太多内容了，基本讲一个点就能引伸出不少点出来。
刚刚上述中关键字咱们很经常使用，可是稍微不注意就可能会弄混淆；而在高级函数中，不难发现不少“高级函数”的实现其实并不复杂，数十行代码即可搞定，但重要的是能真正理解它们的原理，在实际中适时地应用，以此性能提高，让代码简洁，逻辑清晰。
:clipboard: 参考
- 1. 深刻认知 JavaScript
- 2. 深刻 JavaScript 中的默认参数！
- 3. 深刻认识javascript中的eval函数
- 4. 03.深刻javascript
- 5. 深刻认识CPU
- 6. JavaScript深刻解读
- 7. JavaScript深刻浅出
- 8. 深刻理解JavaScript
- 9. 深刻Javascript原理
- 10. 深刻Javascript之this
- 更多相关文章...
- • JavaScript 指南 - 网站建设指南
- • MySQL默认值（DEFAULT） - MySQL教程
- • 算法总结-深度优先算法
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 深刻认知 JavaScript
- 2. 深刻 JavaScript 中的默认参数！
- 3. 深刻认识javascript中的eval函数
- 4. 03.深刻javascript
- 5. 深刻认识CPU
- 6. JavaScript深刻解读
- 7. JavaScript深刻浅出
- 8. 深刻理解JavaScript
- 9. 深刻Javascript原理
- 10. 深刻Javascript之this