Javascript開發教程之js作用域

作用域

詞法作用域:編譯階段確定(欺騙詞法作用域 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
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

發佈留言