JS面向对象基础

·  变量、属性

var a=2; 			//变量：自由的，不属于任何人
alert(a);

var arr=[1,2,3,4];
arr.a=12;			//属性：属于一个对象的
alert(arr.a);

·  函数、方法

function aaa()			//函数：自由的
{
	alert('a');
}

var arr=[1,2,3,4,5];
arr.aaa=function ()		//方法：属于一个对象的
{
	alert('abc');
}

·  this和window

var arr=[1,2,3];
arr.a=12;

arr.show=function ()
{
	alert(this.a);    //this:当前的方法属于谁
};
arr.show();

function show()
{				
	alert(this);	//全局方法属于window之下
};

show();

·  第一个面向对象程序

var obj = new Object()

obj.name='frank';
obj.qq='123456';

obj.showName=function ()
{
	alert('我的名字叫：'+this.name);
};
obj.showQQ=function ()
{
	alert('我的QQ是：'+this.qq);
};

obj.showName();
obj.showQQ();

·     第一个面向对象程序2（构造函数）

function createPerson(name,qq)				//构造函数
{
	var obj = new Object();

	obj.name=name;
	obj.qq=qq;

	obj.showName=function ()
	{
		alert('我的名字叫：'+this.name);
	};
	obj.showQQ=function ()
	{
		alert('我的QQ是：'+this.qq);
	};
	return obj;
};
var obj1 = createPerson('张三','123456');
obj1.showName();
obj1.showQQ();
var obj2 = createPerson('李四','654321'); 
obj2.showName();
obj2.showQQ();

·  工厂方式

function createPerson(name,qq)				//构造函数
{
	//原料
	var obj = new Object();

	//加工
	obj.name=name;
	obj.qq=qq;

	obj.showName=function ()
	{
		alert('我的名字叫：'+this.name);
	};
	obj.showQQ=function ()
	{
		alert('我的QQ是：'+this.qq);
	};

	//出厂
	return obj;
};
var obj1 = createPerson('张三','123456');
obj1.showName();
obj1.showQQ();
var obj2 = createPerson('李四','654321'); 
obj2.showName();
obj2.showQQ()

·  工厂方式2

alert(obj1.showName==obj2.showName);  //相同的代码 出来结果却是false，说明函数重复，造成资源浪费

·  解决工厂方式没有new（用this）

function createPerson(name,qq)				//构造函数
{
	//原料
	//var obj=new Object();

	//加工
	this.name=name;
	this.qq=qq;

	this.showName=function ()
	{
		alert('我的名字叫：'+this.name);
	};
	this.showQQ=function ()
	{
		alert('我的QQ是：'+this.qq);
	};

	//出厂
	//return obj;
};

var obj1 = new createPerson('张三','123456');
var obj2 = new createPerson('李四','654321'); 

obj1.showName();
obj1.showQQ();

obj2.showName();
obj2.showQQ();

·  解决工厂方式资源浪费(用原型)

function createPerson(name,qq)				//构造函数
{
	this.name=name;
	this.qq=qq;
};

createPerson.prototype.showName=function ()             //原型
{
	alert('我的名字叫：'+this.name);
};
createPerson.prototype.showQQ=function ()
{
	alert('我的QQ是：'+this.qq);
};

var obj1 = new createPerson('张三','123456');
var obj2 = new createPerson('李四','654321'); 

alert(obj1.showQQ==obj2.showQQ);

笔记：

JS面向对象基础




·什么是面向对象-不了解原理，会使用功能
1.对象：不了解内部的结构，知道表面的各种操作 （黑盒子） 
2.面向对象：使用对象时，只关注对象提供的功能，不关注其内部细节（比如JQuery）
3.面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用


·JS中的面向对象
1.面向对象编程（OOP）的特点
（1）抽象：把最主要的特征、跟问题相关的特征抽出来
（2）封装：看不到里面的东西，用好表面的功能
（3）继承：（遗传）从父类上继承出一些方法、属性、子类，又有一些自己的特性
多重继承：同时继承多个父级的特性
多态：
2.对象的组成
（1）任何对象都可以加属性，例如给div加index属性，数组也可以
（2）变量实际上和属性是一个东西，只不过变量是自由的不属于任何人，属性是属于一个对象的（function 函数：自由的；方法：属于一个对象）
（3）组成：
     方法--函数：过程、动态的
     属性--变量：状态、静态的


·第一个面向对象程序
1.为对象添加方法和属性
（1）this:当前的方法属于谁
（2）window:全局方法属于window之下
（3）不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性
（4）Object对象：空白对象，几乎没有功能，可以往他身上加东西，避免了和其他起冲突
2.构造函数（构造对象）


·工厂方式
1.什么是工厂（原料、加工、出厂）
2.工厂方式
（1）用构造函数创建一个类
（2）什么是类、对象（实例）：模具和零件


·工厂方式的问题
1.没有new
2.函数重复--资源浪费
3.解决：用this和prototype


·原型--prototype
1.什么是原型 
CSS JS
class    一次给一组元素加样式    原型
行间样式 一次给一个与元素加样式  给对象加事件
（1）原型是class，修改他可以影响一类元素
（2）为Array添加sum方法
arr1.sum=function () ，  给一个加东西
Array.prototype.sum=function () ， 原型：给一组加东西
2.类、对象
类：模子（本身不具备功能，用来生产产品的）
对象：产品（成品，具备功能）
Array 类
arr 对象
原型--往类上加东西


·流行的面向对象编写方式
1.混合方式构造对象:构造函数、原型方式
2.原则
原型用到面向对象：构造函数加属性，原型加方法
3.对象命名规范--类名首字母大写