作用域
詞法作用域：編譯階段確定（欺騙詞法作用域 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)
}
// 這種語法在最新版瀏覽器已經被摒棄并且報錯，函數在 if 中類似 let 擁有一個局部作用域
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
