前端之js对象机制

1. Function是对象。

var sayFunc=new Function("name","age","alert(name+'今年'+age+'岁')");
sayFunc("潘金莲",17);
console.log("方法对象的属性"+sayFunc.length);
//sayFunc.length输出的是参数的个数

2. js的闭包
   闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
   所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

• 用途
  可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
• 注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

注意：不带var定义的变量是全局变量。
例子

function func(){
  var a="内部局部变量";
  function getA(){ //闭包
    return a;
  }
  return getA;
}
var f1=func();
console.log("在外部访问函数的："+f1());

复杂点的例子

var name="The Window";
var obj={
  name:"My Object",
  getNameFunc:function(){
    return function(){
      return this.name;
    }
  }
};
console.log(obj.name);
console.log(obj.getNameFunc()());

编辑器使用：HBuilder

调试工具：Chrome

选择要调试的文件

设置js的断点

再点一下就取消断点。

运行

鼠标放上

调试按钮

当然在Console窗口中也能超链接到Source的调试界面

3. js的面向对象

• 构造对象

直接定义

var diaosi={
  name:"犀利哥",
  age:33,
  say:function(){
    console.log("我是"+this.name+"，今年"+this.age);
  },
  action:function(){
    console.log("走秀");
  }
}
console.log(diaosi.name);
console.log(diaosi.age);
diaosi.say();
diaosi.action();

使用构造方法

function Dog(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
    console.log("我是"+this.name+"，今年"+this.age+"岁");
  };
  this.action=function(){
    console.log("吃骨头");
  }
}

var tom=new Dog("Tom",3);
console.log(tom.name);
console.log(tom.age);
tom.shout();
tom.action();

• 属性
  私有属性；对象属性；类属性；

function C(){
  this.objPro="对象属性";
  C.prototype.objPro2="对象属性";
  var privatePro="私有属性";
  
  this.getPri=function(){ //闭包
    return privatePro;
  };
}
C.classPro="类属性";
console.log(C.classPro);
var c=new C();
console.log(c.objPro);
console.log(c.objPro2);
console.log(c.getPri());

• 方法
  私有方法；对象方法；类方法；

function C(){
  var privateFunc=function(){
    console.log("私有方法");
  };
  
  privateFunc(); //在new的时候内部调用
  
  this.objFunc=function(){
    console.log("对象方法");
  }
  
  C.prototype.objFunc2=function(){
    console.log("对象方法");
  }
};
C.classFunc=function(){
  console.log("类方法");
};

C.classFunc();
var c=new C();
c.objFunc();
c.objFunc2();

• 继承

function Animal(name, age) {
  this.name = name;
  this.age = age;
  this.shout = function() {
    console.log("我是" + this.name + "，今年" + this.age + "岁");
  };
  this.action = function() {
    console.log("吃");
  }
}

function Dog(name,age){
  Animal.apply(this,[name,age]);
}

var tom=new Dog("Tom",2);
console.log(tom.name);
console.log(tom.age);
tom.shout();
tom.action();

Dog.prototype=new Animal();

var baby=new Dog("baby",3);
console.log(baby.name);
console.log(baby.age);
baby.shout();
baby.action();

• 多态模拟

function Animal() {
  this.say = function() {
    console.log("动物");
  };
}

function Dog(){
  this.say = function() {
    console.log("狗");
  };
}

Dog.prototype=new Animal();

function Cat(){
  this.say = function() {
    console.log("猫");
  };
}

Cat.prototype=new Animal();

function say(animal){
  if(animal instanceof Animal){
    animal.say();
  }
}

var dog=new Dog();
var cat=new Cat();
say(dog);
say(cat);