JavaScript 面向对象


JavaScript 中的面向对象与 Java 中的面向对象类似,JavaScript 中的原型对象 和 Java 中的类是一个概念。

原型对象

定义原型对象:

function 原型对象名(){ 
	方法;
	属性;
}

定义原型对象看起来和定义方法很想,所以为了方便区分,习惯上将对象名首字母大写,方法名首字母小写。

创建原型对象与 Java 一样,使用 new 关键字创建原型对象

var 对象名 = new 原型对象名();
var a = new Person();

设置对象属性:

对象名.属性名 = 属性值;
a.name = "张三";
a.age = 10;
a.sex = "M";

设置方法:

a.say = function() {
	alert(a.name + "," + a.age + "," + a.sex); 
}

调用对象的方法:

a.say();

## JavaScript 原型对象的公有属性,私有属性,静态属性 ### 公有属性 公有属性、方法可以在类的外部访问,使用 `this.XXX` 定义的属性和方法为公有,`XXX` 为属性名或方法名:
function Person() {
	this.name = "张三";//公有属性
	this.age = 10;//公有属性
	this.show = function() {//公有方法
		console.log("name:" + this.name + ", age:" + this.age);
	}
}
>**值得一提的是,类的公有属性在类的内部调用时,也需要使用 `this.属性名`。**
### 私有属性 私有属性、方法只能在类的内部访问,使用 `var XXX` 定义的属性和方法为私有,`XXX` 为属性名或方法名:
function Person() {
	var name = "张三";//私有属性
	var age = 10;//私有属性
	var show = function() {//私有方法
		console.log("name:" + name + ", age:" + age);
	}
}
>私有属性在访问时直接使用属性名即可
### 静态属性 使用 `类名.XXX` 定义的属性和方法为静态属性或静态方法,`XXX` 为属性名或方法名:
function Person() {
	Person.name = "张三";//私有属性
	Person.age = 10;//私有属性
	Person.show = function() {//私有方法
		console.log("name:" + Person.name + ", age:" + Person.age);
	}
}
>与 Java 一样,静态属性和方法不属于任何具体的对象,只能通过 `类名.XXX` 来调用。 >与 公有属性类似,即使是类的内部也需要使用 `类名.XXX` 来调用。
## 原型对象 prototype 属性 1. 用于扩展当前原型对象的方法和属性,扩展的方法和属性是每个具体对象中都有的。 2. 用于重写当前原型对象的方法和属性。

假设 Dog 对象已经给定了,无法修改:

function Dog(name, sex){
	this.name = name;
	this.sex = sex;
	this.eat = function() {
		alert("一只" + sex + "狗" + this.name + "正在啃骨头!");
	}
}

var dog1 = new Dog("旺旺","公");
dog1.eat();

这时若想添加一个 bark 方法,就可以使用 类名.prototype.XXX 给 Dog 类添加属性或方法,这些属性和方法在每个 Dog 具体对象中都可以调用。

Dog.prototype.bark = function() {
	alert("它正在狂吠");
}

dog1.bark();

使用 prototype 也可以重写原型对象中的方法和系统提供的方法。


## JavaScript 对象 与 JSON 对象 ### 对象的创建方式 - [使用 `new 原型对象()` 创建原型对象]() - 非原型对象也可以直接创建
var p2 = {
	name: "李四",
	age: 10,
	classroom:{
		classId: 1,
		className: "小葵花班"
	},
	score: [100, 20, 40],
	eat: function() {
		console.log("吃了一天包子。");
	}
};
>该对象是单独的一个对象,没有原型模板,不是原型对象。

JSON

JSON 是一个特殊的 JavaScript 对象,常用的传输数据格式。
其格式为 js 普通对象的属性名全部添加 “” 后的样子

var p2Json = {
	"name": "李四",
	"age": 10,
	"classroom":{
		"classId": 1,
		"className": "小葵花班"
	},
	"score": [100, 20, 40],
	"eat": function() {
		console.log("吃了一天包子。");
	}
};

调用 JSON 对象方式与 JavaScript 对象一样

alert(p2.name);
alert(p2Json.name());

JSON 对象转换为 JavaScript 对象

在传递数据的时候一般将 JSON 对象转换成字符串。
使用 JSON.stringify() 方法可以将 JS 对象或者 JSON 对象转换成 JSON 字符串。

var p2JsonStr = JSON.stringify(p2Json);
alert(p2JsonStr);

若想将 JSON 对象转换为 JavaScript 对象,则需要先将 JSON 对象转换为字符串

var p2New = JSON.parse(p2JsonStr);

## JavaScript 面向对象的特征(封装、继承和多肽) ### 封装
function Person(n,a) {
	var name = n;//私有属性
	var age = a;//私有属性
	this.show = function() {//公有方法
		console.log("name:" + name + ", age:" + age);
	}
	this.setName = function(v) {
		name = v;
	}
	this.setAge = function(a) {
		age = a;
	}
	this.getName = function() {
		return name;
	}
	this.getAge = function() {
		return age;
	}
}

var p1 = new Person("lucy",10);
alert(p1.getAge);
>与 Java 不同,这里的参数名不可和私有属性同名。

继承

function Student(n,a) {
	this.person = Person;//继承 Person
	this.person(n,a);
	this.eat = function() {
		console.log("吃饭");
	}
}

多态

向上转型:父类引用执行不同的子类对象,调用相同的方法,结果不同。
同一个引用指向不同的对象,表现的行为方式不同


## JavaScript 内置对象 - [Array](http://www.w3school.com.cn/jsref/jsref_obj_array.asp) - [Date](http://www.w3school.com.cn/jsref/jsref_obj_date.asp) - [Math](http://www.w3school.com.cn/jsref/jsref_obj_math.asp) - [Number](http://www.w3school.com.cn/jsref/jsref_obj_number.asp) - [String](http://www.w3school.com.cn/jsref/jsref_obj_string.asp) - [Functions](http://www.w3school.com.cn/jsref/jsref_obj_global.asp)

更多内置对象可参考 w3cschool 上的《JavaScript 对象参考手册》


文章作者: CrazyBunQnQ
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC 4.0 许可协议。转载请注明来源 CrazyBunQnQ !
  目录