关于作用域及作用域链
首先我们需要知道一些基本概念。
每一个执行环境关联了一个变量对象。环境中定义的所有变量和函数都保存在这个对象中。 全局执行环境关联的变量对象被认为是window对象,因此所有的全局变量和函数都作为window对象的属性和方法创建的。
如果执行环境是函数,则将其活动对象作为变量对象。
当函数调用时,该函数的执行环境被压入一个环境栈中。而在函数执行之后,该函数的执行环境弹出,把控制权交给之前的执行环境。
执行环境有一个内部scope属性,表示作用域链。作用域链的第0位始终是当前执行环境的变量对象,第一位是父级执行环境的变量对象,一直延伸到全局执行环境(始终是作用域链的最后一位)。
关于闭包
闭包就是能够读取其他函数内部变量的函数。
用途:读取其他函数内部变量,并使变量的值始终保持在内存中。
缺点:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题。
本质:父函数执行结束之后,父函数的执行环境会被弹出环境栈,但与之关联的变量对象依然保存在内存中,并未被销毁(因为它在子函数的作用域链中)
关于原型及原型链
所有对象都有自己的原型对象,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”。
所有对象的原型最终都可以上溯到Object.prototype,Object.prototype的原型是null。读取对象的某个属性时,JavaScript 引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到,则返回undefined。
每个函数都有一个prototype属性,指向一个对象。对于普通函数来说,该属性基本无用。
对于构造函数来说,生成实例的时候,该属性会自动成为实例对象的原型。prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。每个对象都有_proto_属性,指向自己的原型对象。由于这个属性不标准,因此一般不提倡使用。
原型对象的所有属性和方法,都能被实例对象共享。
function Cat(name, color) { this.name = name; this.color = color; }var cat1 = new Cat('大毛', '白色');console.log(Object.getPrototypeOf(cat1) === Cat.prototype) //trueconsole.log(Object.getPrototypeOf(Cat.prototype) === Object.prototype) //trueconsole.log(Object.getPrototypeOf(Cat) === Function.prototype) //trueconsole.log(Object.getPrototypeOf(Function.prototype) === Object.prototype) //true//实例对象cat1的原型链为:Cat.prototype => Object.prototype => null// Cat也是对象,它的原型链为: Function.prototype => Object.prototype => nullvar o = { name: 'liming', age: 23}console.log(Object.getPrototypeOf(o) === Object.prototype) //true//实例对象o的原型链为: Object.prototype => null
关于继承
原型链继承
function Animal(name) { this.name = name || 'animal'; this.sleep = function () { console.log(this.name + '正在sleeping!'); } } Animal.prototype.eat = function (food) { console.log(this.name + '正在吃:' + food); };function Dog() { this.age = 4 this.sayAge = function () { console.log('age is ' + this.age); } } Dog.prototype = new Animal( '二狗')var dog = new Dog()console.log(dog.age) //4console.log(dog.sayAge()) //age is 4console.log(dog.name) //二狗console.log(dog.sleep()) //二狗正在sleeping!console.log(dog.eat('骨头')) //二狗正在吃:骨头console.log(dog instanceof Dog) //trueconsole.log(dog instanceof Animal) //trueconsole.log(dog instanceof Object) //true
实现:将父类的实例作为子类的原型
缺点:创建子类实例时,无法向父类构造函数传参;当父类构造函数中存在引用类型的值,该值会被所有子类实例所共享。
优点:简单,易于实现。
构造函数继承
function Dog() { Animal.call(this, '二狗') }var dog = new Dog()console.log(dog.name) //二狗console.log(dog.sleep()) //二狗正在sleeping!console.log(dog instanceof Dog) //trueconsole.log(dog instanceof Animal) //falseconsole.log(dog instanceof Object) //true
实现:在子类构造函数中调用父类构造函数。
缺点:无法继承父类原型的方法与属性。
优点:可以向父类构造函数传参,当父类构造函数中存在引用类型的值,不会被所有子类实例所共享。
组合继承
function Dog() { Animal.call(this, '二狗') } Dog.prototype = new Animal() Dog.prototype.constructor = Dogvar dog = new Dog()console.log(dog.name) //二狗console.log(dog.sleep()) //二狗正在sleeping!console.log(dog.eat('骨头')) //二狗正在吃:骨头console.log(dog instanceof Dog) //trueconsole.log(dog instanceof Animal) //trueconsole.log(dog instanceof Object) //true
特点:组合继承避免了原型链继承和构造函数继承的缺陷,融合了他们的优点,成为最常用的继承模式。
使用原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性和方法的继承。
缺点:调用两次父类构造函数,子类实例对象的原型会有父类的实例属性。
寄生式继承
var clone = Object.create(new Animal('二狗')) clone.age = 4clone.sayAge = function () { console.log('age is ' + this.age); }console.log(clone.age) //4console.log(clone.sayAge()) //age is 4console.log(clone.name) //二狗console.log(clone.sleep()) //二狗正在sleeping!console.log(clone.eat('骨头')) //二狗正在吃:骨头console.log(clone instanceof Animal) //trueconsole.log(clone instanceof Object) //true
特点:以一个对象为原型,创建一个新对象,然后对新对象进行增强,返回新对象。
寄生组合继承
function Dog() { Animal.call(this, '二狗') this.age = 4 this.sayAge = function () { console.log('age is ' + this.age); } }var clone = Object.create(Animal.prototype) Dog.prototype = clone Dog.prototype.constructor = Dogvar dog = new Dog() dog.colors.push('black')console.log(dog.age) //4console.log(dog.sayAge()) //age is 4console.log(dog.name) //二狗console.log(dog.sleep()) //二狗正在sleeping!console.log(dog.eat('骨头')) //二狗正在吃:骨头console.log(dog instanceof Dog) //trueconsole.log(dog instanceof Animal) //trueconsole.log(dog instanceof Object) //true
特点:解决了组合继承的缺点。
关于this
简单说,this就是属性或方法“当前”所在的对象,指向是可变的。
全局环境使用this,它指的就是顶层对象window。
构造函数中的this,指的是实例对象。
如果对象的方法里面包含this,this的指向就是方法运行时所在的对象。
注意点:
避免多层 this,切勿在函数中包含多层的this。
避免数组处理方法中的 this
避免回调函数中的 this
固定this值
call() 第一个参数就是this所要指向的那个对象,后面的参数则是函数调用时所需的参数。
apply() 与call方法类似,区别是它接收一个数组作为函数执行时的参数。
bind() 将函数体内的this绑定到某个对象,然后返回一个新函数。参数就是所要绑定this的对象,及函数调用时所需的参数。每运行一次,就返回一个新函数。
如果第一个参数为空、null和undefined,则默认传入全局对象。以上三个方法定义在Function.prototype上,所以任何函数都具有这三个方法。
关于执行机制
看了网上很多资料,讲的都大同小异,我按照自己的理解整理了一下,欢迎纠错。
js是单线程语言,同步任务会按行执行,异步任务会进入Event Table并注册函数,当指定的事情完成时,Event Table会将这个函数移入Event Queue。
主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
Event Queue分为宏任务队列(script,定时器等)与微任务队列(promise,process.nextTick等),先执行微任务队列,在执行宏任务队列,每个队列均遵守先进先出的原则。
上述过程会不断重复。
console.log("1") setTimeout(function() { console.log("2") process.nextTick(function() { console.log("3") }) new Promise(function(resolve) { console.log("4") resolve() }).then(function() { console.log("5") }) }) process.nextTick(function() { console.log("6") })new Promise(function(resolve) { console.log("7") resolve() }).then(function() { console.log("8") }) setTimeout(function() { console.log("9") process.nextTick(function() { console.log("10") }) new Promise(function(resolve) { console.log("11") resolve() }).then(function() { console.log("12") }) })// 1 7 6 8 2 4 3 5 9 11 10 12
先打印1,没有问题,遇到setTimeout,setTimeout(简写为s1)会进入宏任务事件队列。
process.nextTick进入微任务事件队列。
遇到promise立即执行,打印7,then函数进入微任务事件队列。
再遇到setTimeout,setTimeout(简写为s2)会进入宏任务事件队列。
执行微任务事件队列里面的任务,打印 6 和 8 (因为process.nextTick是先进入队列的,故先执行,遵守先进先出原则)。
执行宏任务事件队列里面的任务,先执行s1,在执行s2。
执行s1,打印2和4,s1里面的process.nextTick和then函数又进入微任务事件队列,然后打印3和5。
执行s2,打印9和11,s2里面的process.nextTick和then函数又进入微任务事件队列,然后打印10和12。
参考资料
作者:tiancai啊呆
链接:https://www.jianshu.com/p/3d8ef1ea42f1