你不知道的 Javascript

作用域

词法作用域：编译阶段确定（欺骗词法作用域 eval with）

function foo(str){
  "use strict"
  eval(str)
  console.log(a)
}
foo('var a = 2')

function foo(obj){
  with (obj){
    a = 2
  }
}
var o1 = {a:3}
var o2 = {b:3}
foo(o1)
foo(o2)

块作用域 with try/catch let const

for (let i=0; i<10; i++){
  console.log(i)
}

if (true) {
  var a = 1
  let b = 2
  const c = 3
}
console.log(a) // 1
console.log(b) // ReferenceError
console.log(c) // ReferenceError

try{throw 2}catch(a){
  console.log(a) // 2
}
console.log(a) // ReferenceError

提升

定义提升 函数优先

foo() // TypeError
bar() // ReferenceError
var foo = function bar(){}

foo() // 1
function foo(){
  console.log(1)
}
foo = function(){
  console.log(2)
}

foo() // 3
function foo(){
  console.log(1)
}
foo = function(){
  console.log(2)
}
function foo(){
  console.log(3)
}

foo() // 2
if (true){
  function foo(){console.log(1)}
}else{
  function foo(){console.log(2)}
}

闭包

将内部函数传递到所在作用域以外，它都会持有对原始定义作用域的引用，无论何处执行这个函数都会使用闭包。

function foo(){
  setTimeout(function a(){})
}

function foo(){
  return function a(){}
}
var b = foo()
b()

var b = (function(){
  function foo(){}
}())
b.foo()

循环+闭包

for (var i=0; i<5; i++){
  setTimeout(function(){
    console.log(i) // 5
  })
}

for (var i=0; i<5; i++){
  var j = i
  setTimeout(function(){
    console.log(j) // 4
  })
}

for (var i=0; i<5; i++){
  (function(){
    var j = i
    setTimeout(function(){
      console.log(j) // 0 1 2 3 4
    })
  })()
}

for (let i=0; i<5; i++){
  setTimeout(function(){
    console.log(i) // 0 1 2 3 4
  })
}

for (var i=0; i<5; i++){
  let j = i
  setTimeout(function(){
    console.log(j) // 4
  })
}

for (var i=0; i<5; i++){
  (function(j){
    setTimeout(function(){
      console.log(j) // 0 1 2 3 4
    })
  })(i)
}

模块机制闭包的作用

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
  }
}())

require.define('foo', [], function(){
  return {
    hello: function() {console.log('hello world')},
    name:'foo'
  }
})

require.define('bar', ['foo'], function(foo){
  return {
    hello: function() {console.log('bar:' + foo.name)},
    name: 'bar'
  }
})

require.define('user', ['foo', 'bar'], function(foo, bar){
  return {
    hello: function() {console.log('user:' + foo.name +', ' + bar.name)}
  }
})

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绑定

默认绑定

function foo(){
  console.log(this.count) // 1
  console.log(foo.count) // 2
}
var count = 1
foo.count = 2
foo()

严格模式this不会绑定到window
function foo(){
  "use strict"
  console.log(this.count) // TypeError: count undefined
}
var count = 1
foo()

隐式绑定

function foo(){
  console.log(this.count) // 2
}
var obj = {
  count: 2,
  foo: foo
}
obj.foo()

别名丢失隐式绑定

function foo(){
  console.log(this.count) // 1
}
var count = 1
var obj = {
  count: 2,
  foo: foo
}
var bar = obj.foo // 函数别名
bar()

回调丢失隐式绑定

function foo(){
  console.log(this.count) // 1
}
var count = 1
var obj = {
  count: 2,
  foo: foo
}
setTimeout(obj.foo)

显式绑定

function foo(){
  console.log(this.count) // 1
}
var obj = {
  count: 1
}
foo.call(obj)

var bar = foo.bind(obj)
bar()

new绑定

function foo(a){
  this.a = a
}
var bar = new foo(2)
console.log(bar.a) // 2

this丢失

function foo(){
  setTimeout(function() {
    console.log(this.count) // undefined
  })
}
var obj = {
  count: 2
}
foo.call(obj)

局部变量修复

function foo(){
  var self = this
  setTimeout(function() {
    console.log(self.count) // 2
  })
}
var obj = {
  count: 2
}
foo.call(obj)

bind修复

function foo(){
  setTimeout(function() {
    console.log(this.count) // 2
  }.bind(this))
}
var obj = {
  count: 2
}
foo.call(obj)

es6绑定

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

var str = 'hello world'
var strObj = new String('hello world')
console.log(strObj.length) // 11
console.log(str.length) // 11 (string -> new String)

属性描述符ES5

var obj = {
  a: 2
}
Object.getOwnPropertyDescriptor(obj, 'a') // {value: 2, writable: true, enumerable: true, configurable: true}

可写

var obj = {}
Object.defineProperty(obj, 'a', {
  value: 2,
  writable: false
})
obj.a = 3
console.log(obj.a) // 2 严格模式TypeError

可枚举

var obj = {b: 1}
Object.defineProperty(obj, 'a', {
  value: 2,
  enumerable: false
})
for (var key in obj){
  console.log(key) // b
}

可配置（不可配置：不能删除，能修改）

var obj = {}
Object.defineProperty(obj, 'a', {
  value: 2,
  configurable: false
})
delete obj.a
console.log(obj.a) // 2

禁止拓展属性

var obj = {}
Object.preventExtensions(obj)
obj.a = 3
console.log(obj.a) // undefined

密封（禁止拓展属性+不可配置）(preventExtensions+each(configurable: false))

var obj = {}
Object.seal(obj)

冻结（密封+不可修改属性值）(seal+each(writable:false))

var obj = {}
Object.freeze(obj)

[[get]]获取对象属性会执行[[get]]操作，自身没有的属性会在原型链上查找，都没有返回undefined

var obj = {}
console.log(obj.a) // undefined 
console.log(a) // ReferenceError

[[put]] 对象赋值触发[[put]]，在赋值前会检查对象属性描述，例如不可写会失败

var obj = {
  a: 1
}
Object.defineProperty(obj, 'a', {
  writable: false
})
obj.a = 2
console.log(obj.a) // 1

[[put]] 自身存在setter方法，会优先调用setter，如果原型链上有同名setter，会调用原型链的setter

var obj = {
  a: 1,
  set a(val){
    console.log('nothing happend')
  }
}
obj.a = 2
console.log(obj.a) // undefined set方法会覆盖同名属性

getter

var obj = {
  get a(){
    return 1
  }
}
console.log(obj.a) // 1

setter 一般使用_property_表示屏蔽属性

var obj = {
  set a(val){
    _a_ = val*2
  },
  get a(){
    return _a_ - 1
  }
}
obj.a = 2
console.log(obj.a) // 3

类

js没有类（继承是复制，js某些部分是引用）

类是一种设计模式，可以被模拟：混入

// 显式混入 ($.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 {}

// 隐式混入
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) // 1
child.add()
console.log(child.count) // 2 隐式混入赋值操作在child而不是obj

// 寄生继承（既是显示又是隐式）
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

// 原型的设置和屏蔽
var foo = {
  a: 1
}
var bar = Object.create(foo)
console.log(bar.hasOwnProperty('a')) // false 原型设置
bar.a++
console.log(bar.hasOwnProperty('a')) // true 原型被屏蔽

// 设置原型链
// 直接设置原型
function foo(){this.a = 1}
foo.prototype.b = 2
function bar(){}
bar.prototype = foo.prototype // bar.prototype: foo {}
var b = new bar()
console.log(b.a) // undefined
console.log(b.b) // 2

// 无副作用设置原型链
function foo(){this.a = 1}
foo.prototype.b = 2
function bar(){}
bar.prototype = Object.create(foo.prototype) // bar.prototype: object {}
var b = new bar()
console.log(b.a) // undefined
console.log(b.b) // 2

// ES6可以不抛弃原型直接赋值
Object.setPrototypeOf(var.prototype, foo.prototype)

// 常见用法但有调用构造方法的副作用
function foo(){this.a = 1}
foo.prototype.b = 2
function bar(){}
bar.prototype = new foo()
var b = new bar()
console.log(b.a) // 1 副作用：执行了构造函数
console.log(b.b) // 2

// 判断类关系
function foo(){}
var f = new foo()
console.log(f instanceof foo) // true
console.log(foo.prototype.isPrototypeOf(f)) // true

// 如何获取原型
function foo(){}
var a = new foo()

console.log(Object.getPrototypeOf(a) === foo.prototype) // true

// __proto__ 可以获取原型的原因
Object.defineProperty(Object.prototype, '__proto__', {
  get: function(){
    return Object.getPrototypeOf(this)
  },
  set: function(o){
    Object.setPrototype(this, o)
    return o
  }
})

行为委托

行为委托是除了类之外，更清晰的一种继承设计模式

// 类创建实例
function Foo(){
  this.something = function(){}
}
var bar = new Foo()
bar.something()

// 委托创建实例 ES5
var foo = {
  something: function(){}
}
var bar = Object.create(foo) // foo 自身也是个实例
bar.something()

// Object.create模拟
if (!Object.create){
  Object.create = function(obj){
    function F(){}
    F.prototype = obj
    return new F()
  }
}

// 类的继承
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

// 对象关联的继承
var Foo = {
  say: function(){console.log(1)}
}
var Bar = Object.create(Foo)

var b = Object.create(Bar) // 或 new Bar()
b.say() // 1