前端笔记(js内存作用域及闭包概念)

2017-11-16

js中不是所有花括号(if,while等)都能创建作用域，只有函数语句中的花括号才能创建

内存作用域和对象

var makeArray = function() {
    return [];
}
var array1 = makeArray();
var array2 = makeArray();
console.log(array1 === array2); //false

闭包。比如functionA存在functionB中，functionA持有functionB的变量x。在functionB执行完成后返回functionA，functionA仍然可以调用x进行执行。

var sagas = [];
var hero = aHero();
var newSaga = function() {
    var foil = aFoil();
    sagas.push(function(){
        var deed = aDeed();
        log(hero+deed+*foil*)
    });
};
//预测输出
newSaga();
sagas[0]();
sagas[0]();
newSaga();
sagas[0]();
sagas[1]();
sagas[0]();

`this`关键字

1) this所绑定的对象

var obj = {
    fn: function(a,b) {
        log(this);
    }
};
//var ob2 = {method:obj.fn}
obj.fn(3,4); //this->obj(this绑定obj对象。但如果没有点符号，将绑定成全局变量）

2) this在大部分重要的用法中都以参数的形式出现
3) this绑定window对象

var fn = function(x,y) {
    console.log(this, x, y);
}

fn(1,2); //输出 window, 1, 2

4) 想要this指向你想绑定的对象。需要使用.符号或使用内置的.call方法。以及new。

原型链(prototype)

var gold = {a:1};
console.log(gold.a); //1
console.log(gold.z); //undefined

var rose = Object.create(gold);
rose.b = 2;
console.log(rose.a);  //1

对象修饰模式

经常用于向某个已拥有了某些功能的对象添加功能

var carlike = function(obj, loc) {
    obj.loc = loc;
    obj.move = function() {
        obj.loc++;  // 每次调用函数carlike时都会创建一个新的闭包作用域。变量obj能够被创建时永远指向一个carlike对象
    };
    return obj;
}

var amy = carlike({}, 1);
amy.move();
var ben = carlike({}, 9);
ben.move();

函数类

var Car = function(loc) {
    var obj = {loc: loc};
    obj.move = function() {
        obj.loc++;   
    };
    return obj;
}

var amy = Car(1);
amy.move();
var ben = Car(9);
ben.move();

函数共享模式改造，减少每次move函数的创建

var Car = function(loc) {
    var obj = {loc: loc};
    obj.move = move;
    return obj;
}

var move = function() {
        this.loc++;   
};

如果方法较多，可以

var Car = function(loc) {
    var obj = {loc: loc};
    extend(obj, Car.methods);   //不是原生js函数,参考jquery
    return obj;
}
Car.methods = {
 move : function() {
        this.loc++;   
 };
 on : function() {
 }
 off:function() {
 }
}

原型类

var Car = function(loc) {
    var obj = Object.create(Car.methods);
    obj.loc = loc;  
    return obj;
}

构造函数原型

var Car = function(loc) {
    var obj = Object.create(Car.prototype);
    obj.loc = loc;  
    return obj;
}

Car.prototype.move = function() {
    this.loc++;
}

console.log(Car.prototype.constructor);
console.log(amy.construnctor)
console.log(amy instanceof Car)

伪类模式

var Car = function(loc) {
    this.loc = loc;  //对于每个类实例不同之处
}
Car.prototype.move = function() {   //对于每个类实例相似之处存储为prototype属性
    this.loc++;
}

var amy = new Car(1);
amy.move();

超类和子类

var Car = function(loc) {
    this.loc = loc;
}
Car.prototype.move = function() {   
    this.loc++;
}

var Van = function(loc) {  //Car的子类
    Car.call(this,loc)  //继承Car的方法把loc放入当前执行环境中来
}

伪类子类

Object.create在创建复制对象时，没有创建constructor。

var Car = function(loc) {
    this.loc = loc;
}
Car.prototype.move = function() {   
    this.loc++;
}
var Van = function(loc) {  
    Car.call(this,loc)
}
Van.prototype = Object.create(Car.prototype);
Van.prototype.constructor = Van;
Van.prototype.grab = function() { /***/ }

阅读数: