你不知道的 Javascript
作用域
词法作用域：编译阶段确定（欺骗词法作用域 eval with）
JavaScript
123456 | function foo(str){ "use strict" eval(str) console.log(a)}foo('var a = 2') |
|---|
JavaScript
123456789 | function foo(obj){ with (obj){ a = 2 }}var o1 = {a:3}var o2 = {b:3}foo(o1)foo(o2) |
|---|
块作用域 with try/catch let const
JavaScript
123 | for (let i=0; i<10; i++){ console.log(i)} |
|---|
JavaScript
12345678 | if (true) { var a = 1 let b = 2 const c = 3}console.log(a) // 1console.log(b) // ReferenceErrorconsole.log(c) // ReferenceError |
|---|
JavaScript
1234 | try{throw 2}catch(a){ console.log(a) // 2}console.log(a) // ReferenceError |
|---|
提升
定义提升 函数优先
JavaScript
123 | foo() // TypeErrorbar() // ReferenceErrorvar foo = function bar(){} |
|---|
JavaScript
1234567 | foo() // 1function foo(){ console.log(1)}foo = function(){ console.log(2)} |
|---|
JavaScript
12345678910 | foo() // 3function foo(){ console.log(1)}foo = function(){ console.log(2)}function foo(){ console.log(3)} |
|---|
JavaScript
123456 | foo() // 2if (true){ function foo(){console.log(1)}}else{ function foo(){console.log(2)}} |
|---|
闭包
将内部函数传递到所在作用域以外，它都会持有对原始定义作用域的引用，无论何处执行这个函数都会使用闭包。
JavaScript
123 | function foo(){ setTimeout(function a(){})} |
|---|
JavaScript
12345 | function foo(){ return function a(){}}var b = foo()b() |
|---|
JavaScript
1234 | var b = (function(){ function foo(){}}())b.foo() |
|---|
循环+闭包
JavaScript
12345 | for (var i=0; i<5; i++){ setTimeout(function(){ console.log(i) // 5 })} |
|---|
JavaScript
123456 | for (var i=0; i<5; i++){ var j = i setTimeout(function(){ console.log(j) // 4 })} |
|---|
JavaScript
12345678 | for (var i=0; i<5; i++){ (function(){ var j = i setTimeout(function(){ console.log(j) // 0 1 2 3 4 }) })()} |
|---|
JavaScript
12345 | for (let i=0; i<5; i++){ setTimeout(function(){ console.log(i) // 0 1 2 3 4 })} |
|---|
JavaScript
1234567 | for (var i=0; i<5; i++){ (function(j){ setTimeout(function(){ console.log(j) // 0 1 2 3 4 }) })(i)} |
|---|
模块机制闭包的作用
JavaScript
1234567891011121314151617 | var require = (function(name){ var modules = {} function define(name, deps, impl) { for (var i=0; i<deps.length; i++){ deps[i] = modules[deps[i]] } modules[name] = impl.apply(impl, deps) } function get(name) { return modules[name] } console.log(name) return { define: define, get: get }}()) |
|---|
JavaScript
123456 | require.define('foo', [], function(){ return { hello: function() {console.log('hello world')}, name:'foo' }}) |
|---|
JavaScript
123456 | require.define('bar', ['foo'], function(foo){ return { hello: function() {console.log('bar:' + foo.name)}, name: 'bar' }}) |
|---|
JavaScript
12345 | require.define('user', ['foo', 'bar'], function(foo, bar){ return { hello: function() {console.log('user:' + foo.name +', ' + bar.name)} }}) |
|---|
JavaScript
123456 | var foo = require.get('foo')var bar = require.get('bar')var user = require.get('user')foo.hello()bar.hello()user.hello() |
|---|
This
默认绑定 隐式绑定 显式绑定（硬绑定 call apply bind） new绑定
默认绑定
JavaScript
1234567 | function foo(){ console.log(this.count) // 1 console.log(foo.count) // 2}var count = 1foo.count = 2foo() |
|---|
JavaScript
1234567 | 严格模式this不会绑定到windowfunction foo(){ "use strict" console.log(this.count) // TypeError: count undefined}var count = 1foo() |
|---|
隐式绑定
JavaScript
12345678 | function foo(){ console.log(this.count) // 2}var obj = { count: 2, foo: foo}obj.foo() |
|---|
别名丢失隐式绑定
JavaScript
12345678910 | function foo(){ console.log(this.count) // 1}var count = 1var obj = { count: 2, foo: foo}var bar = obj.foo // 函数别名bar() |
|---|
回调丢失隐式绑定
JavaScript
123456789 | function foo(){ console.log(this.count) // 1}var count = 1var obj = { count: 2, foo: foo}setTimeout(obj.foo) |
|---|
显式绑定
JavaScript
12345678910 | function foo(){ console.log(this.count) // 1}var obj = { count: 1}foo.call(obj) var bar = foo.bind(obj)bar() |
|---|
new绑定
JavaScript
12345 | function foo(a){ this.a = a}var bar = new foo(2)console.log(bar.a) // 2 |
|---|
this丢失
JavaScript
123456789 | function foo(){ setTimeout(function() { console.log(this.count) // undefined })}var obj = { count: 2}foo.call(obj) |
|---|
局部变量修复
JavaScript
12345678910 | function foo(){ var self = this setTimeout(function() { console.log(self.count) // 2 })}var obj = { count: 2}foo.call(obj) |
|---|
bind修复
JavaScript
123456789 | function foo(){ setTimeout(function() { console.log(this.count) // 2 }.bind(this))}var obj = { count: 2}foo.call(obj) |
|---|
es6绑定
JavaScript
123456789 | function foo(){ setTimeout(() => { console.log(this.count) // 2 })}var obj = { count: 2}foo.call(obj) |
|---|
对象
类型 string number boolean null undefined object
对象 String Number Boolean Object Function Array Date RegExp Error
JavaScript
1234 | var str = 'hello world'var strObj = new String('hello world')console.log(strObj.length) // 11console.log(str.length) // 11 (string -> new String) |
|---|
属性描述符ES5
JavaScript
1234 | var obj = { a: 2}Object.getOwnPropertyDescriptor(obj, 'a') // {value: 2, writable: true, enumerable: true, configurable: true} |
|---|
可写
JavaScript
1234567 | var obj = {}Object.defineProperty(obj, 'a', { value: 2, writable: false})obj.a = 3console.log(obj.a) // 2 严格模式TypeError |
|---|
可枚举
JavaScript
12345678 | var obj = {b: 1}Object.defineProperty(obj, 'a', { value: 2, enumerable: false})for (var key in obj){ console.log(key) // b} |
|---|
可配置（不可配置：不能删除，能修改）
JavaScript
1234567 | var obj = {}Object.defineProperty(obj, 'a', { value: 2, configurable: false})delete obj.aconsole.log(obj.a) // 2 |
|---|
禁止拓展属性
JavaScript
1234 | var obj = {}Object.preventExtensions(obj)obj.a = 3console.log(obj.a) // undefined |
|---|
密封（禁止拓展属性+不可配置）(preventExtensions+each(configurable: false))
JavaScript
12 | var obj = {}Object.seal(obj) |
|---|
冻结（密封+不可修改属性值）(seal+each(writable:false))
JavaScript
12 | var obj = {}Object.freeze(obj) |
|---|
[[get]]获取对象属性会执行[[get]]操作，自身没有的属性会在原型链上查找，都没有返回undefined
JavaScript
123 | var obj = {}console.log(obj.a) // undefined console.log(a) // ReferenceError |
|---|
[[put]] 对象赋值触发[[put]]，在赋值前会检查对象属性描述，例如不可写会失败
JavaScript
12345678 | var obj = { a: 1}Object.defineProperty(obj, 'a', { writable: false})obj.a = 2console.log(obj.a) // 1 |
|---|
[[put]] 自身存在setter方法，会优先调用setter，如果原型链上有同名setter，会调用原型链的setter
JavaScript
12345678 | var obj = { a: 1, set a(val){ console.log('nothing happend') }}obj.a = 2console.log(obj.a) // undefined set方法会覆盖同名属性 |
|---|
getter
JavaScript
123456 | var obj = { get a(){ return 1 }}console.log(obj.a) // 1 |
|---|
setter 一般使用_property_表示屏蔽属性
JavaScript
12345678910 | var obj = { set a(val){ _a_ = val*2 }, get a(){ return _a_ - 1 }}obj.a = 2console.log(obj.a) // 3 |
|---|
类
js没有类（继承是复制，js某些部分是引用）
类是一种设计模式，可以被模拟：混入
JavaScript
1234567891011121314151617181920 | // 显式混入 ($.extend)function mixin(sourceObj, targetObj) { for (var key in sourceObj) { if (!(key in targetObj)) { // 重名不覆盖，实现多态 targetObj[key] = sourceObj[key] } } return targetObj} var obj = { a: 1, b: function(){console.log(2)}} var child = mixin(obj, { c:3}) console.log(child.b.prototype) // obj.b {} |
|---|
JavaScript
1234567891011121314151617 | // 隐式混入var obj = { add: function() { this.count = this.count ? this.count+1 : 1 }} var child = { add: function() { obj.add.call(this) }} obj.add()console.log(obj.count) // 1child.add()console.log(child.count) // 2 隐式混入赋值操作在child而不是obj |
|---|
JavaScript
1234567891011 | // 寄生继承（既是显示又是隐式）function obj(){ this.a = 1}function child(){ var o= new obj() o.b = 2 return o}var c = new child()console.log(c.b) //2 |
|---|
原型
prototype
JavaScript
12345678 | // 原型的设置和屏蔽var foo = { a: 1}var bar = Object.create(foo)console.log(bar.hasOwnProperty('a')) // false 原型设置bar.a++console.log(bar.hasOwnProperty('a')) // true 原型被屏蔽 |
|---|
JavaScript
123456789101112131415161718192021222324252627282930 | // 设置原型链// 直接设置原型function foo(){this.a = 1}foo.prototype.b = 2function bar(){}bar.prototype = foo.prototype // bar.prototype: foo {}var b = new bar()console.log(b.a) // undefinedconsole.log(b.b) // 2 // 无副作用设置原型链function foo(){this.a = 1}foo.prototype.b = 2function bar(){}bar.prototype = Object.create(foo.prototype) // bar.prototype: object {}var b = new bar()console.log(b.a) // undefinedconsole.log(b.b) // 2 // ES6可以不抛弃原型直接赋值Object.setPrototypeOf(var.prototype, foo.prototype) // 常见用法但有调用构造方法的副作用function foo(){this.a = 1}foo.prototype.b = 2function bar(){}bar.prototype = new foo()var b = new bar()console.log(b.a) // 1 副作用：执行了构造函数console.log(b.b) // 2 |
|---|
JavaScript
12345 | // 判断类关系function foo(){}var f = new foo()console.log(f instanceof foo) // trueconsole.log(foo.prototype.isPrototypeOf(f)) // true |
|---|
JavaScript
12345 | // 如何获取原型function foo(){}var a = new foo() console.log(Object.getPrototypeOf(a) === foo.prototype) // true |
|---|
JavaScript
12345678910 | // __proto__ 可以获取原型的原因Object.defineProperty(Object.prototype, '__proto__', { get: function(){ return Object.getPrototypeOf(this) }, set: function(o){ Object.setPrototype(this, o) return o }}) |
|---|
行为委托
行为委托是除了类之外，更清晰的一种继承设计模式
JavaScript
123456 | // 类创建实例function Foo(){ this.something = function(){}}var bar = new Foo()bar.something() |
|---|
JavaScript
123456 | // 委托创建实例 ES5var foo = { something: function(){}}var bar = Object.create(foo) // foo 自身也是个实例bar.something() |
|---|
JavaScript
12345678 | // Object.create模拟if (!Object.create){ Object.create = function(obj){ function F(){} F.prototype = obj return new F() }} |
|---|
JavaScript
123456789 | // 类的继承function Foo(){}Foo.prototype.say = function(){console.log(1)} function Bar(){}Bar.prototype = Object.create(Foo.prototype) // 或 new Foo() var b = new Bar()b.say() // 1 |
|---|
JavaScript
12345678 | // 对象关联的继承var Foo = { say: function(){console.log(1)}}var Bar = Object.create(Foo) var b = Object.create(Bar) // 或 new Bar()b.say() // 1 |
|---|