可以说，JavaScript 是一种基于对象的语言，但是，它又不是一种真正的面向对象的编程语言，因为它的语法中不存在 class（类）。
本节将分析和解决如何在 JavaScript 中实现封装和继承等面向对象的问题。
一、类
一个没有任何属性和方法的类的定义：
function MyClass(){};
其实这就是个简单函数的声明，这个函数就是一个类的定义的实现。
使用这个类：
var cls1 = new MyClass();
这样，利用 new 就可以生成 MyClass的一个实例了。
所以，在JavaScript中，可以说函数就是类，类就是函数。
一个实例的封装包含属性和方法的封装：
function MyClass(name,age){
this.name = name;
this.age = age;
};
var cls1 = new MyClass("yf",18);
alert(cls1.name + ":" + cls1.age);//[yf:18]
在函数内使用 this 就能给函数本身增加属性值。上面的代码中就给 MyClass 函数增加了 name 和 age 两个属性。
利用this给这个类增加一个toString 方法：
方式1：
function MyClass(name,age){
this.name = name;
this.age = age;
this.toString() = function(){
alert(this.name + ":" + this.age);
};
};
var cls1 = new MyClass("yf",18);
cls1.toString();//[yf:18]
方式2（这种方式只是给 cls1 这个实例增加了方法，并未给 MyClass 本身增加方法。）：
function MyClass(name,age){
this.name = name;
this.age = age;
};
var cls1 = new MyClass("yf",18);
cls1.toString() = function(){
alert(this.name + ":" + this.age);
};
cls1.toString();//[yf:18]
比如，使用方式2时下面的代码会出错 ：
function MyClass(name,age){
this.name = name;
this.age = age;
};
var cls1 = new MyClass("yf",18);
cls1.toString() = function(){
alert(this.name + ":" + this.age);
};
cls1.toString();//[yf:18]
var cls2 = new MyClass("cx",19);
cls2.toString();// 报错
使用函数的prototype对象来添加方法：
每一个函数都会包含一个 prototype 属性，这个属性指向了一个 prototype 对象，我们可以指定函数对应的 prototype 对象。如果不指定，则函数的 prototype 属性将指向一个默认的 prototype 对象，并且此默认 prototype 对象的 constructor 属性又会指向该函数。
当用构造函数创建一个新的对象时，新的对象会获取构造函数的 prototype 属性所指向的 prototype 对象的所有属性和方法，这样一来，构造函数对应的 prototype 对象所做的任何操作都会反映到它所生成的对象上，所有的这些对象将共享与构造函数对应的 prototype 对象的属性和方法。
虽然新创建的对象可以使用它的构造函数所指向的 prototype 对象的属性和方法，但不能像构造函数那样直接调用 prototype 对象（对象没有 prototype 属性）。
简而言之，如果我么使用函数的prototype对象来给函数添加方法，那么创建一个新的对象的时候，并不会复制这个函数的所有方法，而是指向了这个函数的所有方法。
具体代码：
function MyClass(name,age){
this.name = name;
this.age = age;
}
MyClass.prototype.toString = function(){
alert(this.name + ":" + thus.age);
}
var cls1 = new MyClass("yf",18);
clas1.toString();//[yf:18]
var cls2 = new MyClass("cx",19);
clas2.toString();//[cx:19]
prototype属性说明图
如果要加入多个方法，可以用下面的方式实现封装：
function MyClass(name,age){
this.name = name;
this.age = age;
}
MyClass.prototype = {
toString:function(){
alert(this.name + ":" + thus.age);
};
sayHello:function(){
alert(this.name + ",你好!");
};
}
var cls1 = new MyClass("yf",18);
cls1.toString();//[yf:18]
cls1.sayHellow ();//[yf, 你好!]
二、静态类
其实，下面的函数本身就可以当作静态类来用 ：
var StaticClass = function(){};
StaticClass.name = "StaticName";
StaticClass.Sum = function(value1,value2){
return value1 + value2;
};
alert(StaticClass.name);//[StaticName]
alert(StaticClass.Sum(1,3));//[4]
这样，在使用静态类的时候，就无须创建新的实例了，可直接用“类名 + 点 + 属性或方
法”的方式。
三、继承
上面只讲了类的封装，那么如何实现类的继承呢？如有如下两个构造函数 ：
function PeopleClass(){
this.type = " 人 ";
};
PeopleClass.prototype = {
getType:function(){
alert(" 这是一个人 ");
}
};
function StudentClass(name,sex){
this.name = name;
this.sex = sex;
};
属性的继承：使用 apply 方法将父对象的构造函数绑定在子对象上
function PeopleClass(){
this.type = " 人 ";
};
PeopleClass.prototype = {
getType:function(){
alert(" 这是一个人 ");
}
};
function StudentClass(name,sex){
PeopleClass.apply(this, arguments);
this.name = name;
this.sex = sex;
};
var stu = new StudentClass("yf"," 女 ");
alert(stu.type);//[ 人 ]
从运行结果来看，StudentClass 继承了 PeopleClass 的属性“人”。
方法的继承：循环使用父对象的 prototype 进行复制
function PeopleClass(){
this.type = " 人 ";
};
PeopleClass.prototype = {
getType:function(){
alert(" 这是一个人 ");
}
};
function StudentClass(name,sex){
PeopleClass.apply(this, arguments);
var prop;
for(prop in PeopleClass.prototype){
var proto = this.constructor.prototype;
if(!proto[prop]){
proto[prop] = PeopleClass.prototype[prop];
}
proto[prop]["super"] = PeopleClass.prototype;
}
this.name = name;
this.sex = sex;
};
var stu = new StudentClass("yf"," 女 ");
alert(stu.type);//[ 人 ]
stu.getType();//[ 这是一个人 ]
三、致谢
本文内容是我对张路斌老师《HTML5 Canvas 游戏开发实战》第一章的学习总结，感谢张路斌老师，也感谢阅读本文的你给我的鼓励!
也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦
作为一个前端小白，如果学习笔记中有错误的地方，还请不吝指点，谢谢！
网友评论