前端之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()());

回显
My Object
The Window

编辑器使用：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);