前端进阶必读:《JavaScript核心技术开发解密》核心提炼二
前言
最近读勒基本关于前端的数据《JavaScript核心技术开发解密》,《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用,但从未从更深的层面去思考他们是如何运作,为什么会产生这种特性,等等…
这本书先从《JavaScript核心技术开发解密》开始讲解,分为两篇讲完,读完本篇你能学到:
前端进阶必读:《JavaScript核心技术开发解密》核心提炼一
前端进阶必读:《JavaScript核心技术开发解密》核心提炼三
《核心提炼二》
五、作用域与作用域链
在JS中,作用域是用来规定变量/函数可访问的规则
5.1作用域
5.1.1全局作用域
在非严格模式,未定义的变量/函数会自动的变成window的属性;
在实践中,尽可能的减少使用全局变量/函数,为了减少协作冲突,提高性能(全局作用域在作用域链的链尾)
5.1.2函数作用域
在ES6之前,es是没有块级作用域的,所以一定是在函数环境中才能生成新作用域
案例:
var arr = [1,2,3];
for(var i = 0; i < arr.length; i++) {
console.log(i);
}
console.log(i); // 4
5.1.3模拟块级作用域
A: 利用函数产生
var arr = [1,2,3];
// 匿名自执行函数执行会产生函数作用域
(function () {
for(var i = 0; i < arr.length; i++) {
console.log(i);
}
})()
// 匿名自执行函数的几种写法
(function(){})() // 最常用
*function(){}()
-function(){}()
!function(){}()
重要知识来了:
在ES中,往往通过自执行函数来实现模块化;
模块化是非常重要的开发思维
5.2作用域链
scopeChain是当前执行环境的上层执行环境的一系列变量对象组成,串联作用域。
案例:
var a = 20;
function test () {
var b = a + 10;
function innerTest () {
var c = 10;
return b + c;
}
return innerTest;
}
test();
/**
以上代码innerText的作用域链如下:
innerTestEC = {
VO: {...}, // 变量对象
scopeChain: [VO(innerTest),VO(test),VO(window)], // 好好看这里!
this: {...}
}
**/
6、闭包
到了这里,就到了前端是个人都听过的东西了,极其重要的特性!!!
6.1概念
闭包是一种特殊对象
由两部分组成:
- 执行上下文A
- 该执行上下文创建的函数B
B执行时,刚问了A中的值,闭包即产生
6.2闭包与垃圾回收机制
正常的上下文运行后,内部的内容都是去了引用而被垃圾回收,但闭包导致A的变量被B持有,阻止了垃圾回授(所以也会导致性能问题)
6.3闭包与作用域链
- 作用域链在编译中以确定规则,在执行中产生
- 函数调用栈在执行中才确定
6.4 在chrome开发工具中能够观察函数调用栈,作用域链与闭包
6.5 应用闭包
6.5.1 循环、setTtimeOut与闭包
案例:
利用闭包的知识,修改下面这段代码,让代码的执行结果为隔秒输出1,2,3,4,5
for(var i = 0; i <= 5; i++) {
setTimeOut(function timer() {
console.log(i);
},i * 1000 )
}
利用闭包修改
for(var i = 0; i <= 5; i++) {
(function (i) {
setTimeOut(function timer() {
console.log(i);
},i * 1000 )
})(i)
}
或者
for(var i = 0; i <= 5; i++) {
setTimeOut((function (i) {
return function timer () {
console.log(i);
}
})(i), i * 1000 )
}
6.5.2单例模式与闭包
在JS中有许多编程思维,其中单例模式时实践中最常用的模式之一,而它的实现与闭包息息相关
七、this
鸡婆一下:来到这个很多人都搞不清楚this指向的问题了,看完这一样相信你会豁然开朗,因为this指向其实比想象中要简单得多。
7.1 this指向
当函数被调用执行时,函数进入创建阶段(前面有讲到),此时会生成变量对象,this确定指向,还做了XXX,随后进入执行阶段。
案例:
var a = 10;
var obj = {
a : 20
}
function fn () {
console.log(this.a);
}
fn(); // 10 (方法时一定有调用者的,这里省略是因为在非严格模式下,自动变成window.fn())
fn.call(obj); // 20 因为fn函数的执行上下文this被修改成obj对象
7.2 call/apply/bind显示绑定this
相信很多人都知道这三个函数的作用,call/apply几乎一样,知只是传参规则不同,bind是先绑定,返回绑定后的方法,未执行。
call | apply | bind |
---|---|---|
直接传参 | 数组传参 | 直接传参(不立即执行,而是返回修改this后的方法) |
ES6中的箭头函数是不能改变this的,使用以上三个方法也不能(先预告,后面会讲到)
八、面向对象
8.1.1
// 构造函数与普通函数并无区别,首字母大写是约定的习惯,new关键字才是将构造方法变得与众不同
var Person = function (name, age) {
this.name = name;
this.age = age;
}
Person.protptype.getName = function () {
return this.name
}
8.1.2 new关键字
下面我们来模拟一边new关键字的作用
function New (constructFunc) {
// 生命中间对象,最后作为返回的实例,相当于let obj = New(Obj); => obj = res
var res = {};
if(constructFunc.prototype !== null) {
// 将实例的原型指向构造函数的原型
res.__proto__ = constructFunc.prototype;
}
// ret为该构造函数执行的结果,将构造函数的this改为执行res
var ret = constructFunc.apply(res, Array.prototype.slice.call(arguments, 1));
// 如果构造函数有返回值,则直接返回
if((typeof rest === "object" || typeof ret === "function") && ret !== null) {
return ret;
}
// 否则返回该实例
return res;
}
总结:
- 先创建空的、新的实例对象(New(func)返回的对象)
- 将实例对象的原型指向构造函数的原型
- 将构造函数的this改为指向实例对象
- 最后返回该实例对象(如果构造函数本身有返回则直接返回)
8.1.3更简单的原型写法
function Person () {};
Person.prototype.getName = function () {};
Person.prototype.getAge = function () {};
// 简化
Person.prototype = {
construor : Person, // 此时Person.protottype指向了新的对象,所以会导致原型对象丢失,所以加上此行
getName : function () {},
getAge: function () {},
}
8.1.4实例方法、原型方法、静态方法
function Foo () {
this.bar = fucntion () { // 实例方法
return 'bar in Foo';
}
}
Foo.bar = function () {return 'static'} // 静态方法
Foo.prototype.bar = function () {return 'prototype'} // 原型方法
本文地址:https://blog.csdn.net/bigname22/article/details/107481087