JavaScript 自定义类-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

一、构造函数方法

经典方法，内部使用this关键字指代实例对象

基本语法：

function 类名() {

/* 凡是定义类的公共属性和公共方法都要使用this关键字 */

this.属性名;// 公共属性

var 属性名;//私有属性

//定义类的公共函数

this.函数名 = function() {

...

}

//定义类的私有函数

function 函数名() {

...

}

范例：

function Cat(name) {

this.name = name;

this.makeSound = function() {

console.log("makeSound Method.");

}

生成实例，借助new关键字：

var cat = new Cat();

console.log(cat.name);

类的属性和方法，还可以定义在构造函数的prototype对象上

Cat.prototype.getName = function() {

return this.name;

}

二、原型方式

说明：使用原型方式编写，无法给类添加私有属性和私有方法，使用原型方式添加的属性和方法都是public

写法一：

function Person(_name, _age, _weight, _height) {

this.init(_name, _age, _weight, _height);

}

//使用原型方式定义Person类的public属性：name, age, weight, height

Person.prototype.name;

Person.prototype.age;

Person.prototype.weight;

Person.prototype.height;

//使用原型方式给Person类添加public方法

Person.prototype.init = function(_name, _age, _weight, _height) {

this.name = _name;

this.age = _age;

this.weight = _weight;

this.height = _height;

}

Person.prototype.show = function() {

console.log("Show Method.");

}

写法二、（推荐采用）

function Person() {};

Person.prototype = {

name: "", // public

age : 0, // public

weight : 0, // public

height: 0, //public

/* public 方法 */

init : function(_name, _age, _weight, _height) {

this.name = _name;

this.age = _age;

this.weight = _weight;

this.height = _height;

show : function() {

console.log("Show Method.");

}

};

三、构造函数 + 原型方式

构造函数：定义类的属性(public属性和private属性)；

原型方式：定义类的方法(public方法)

范例：

function Persion(_name, _age, _salary) {

/*Person内部定义类的public属性和private属性以及private方法*/

// 类的公开属性方式：this.属性名

this.name = _name;

//类的private属性方式：var 属性名

var age = _age;

var salary = _salary;

/* 定义类的私有方法(内部方法)，只能在类内部使用，方式为 function funcName() {} 或者

var funcName = function() {} */

function privateFunc() {

console.log("Private Method");

}

//只能在类的内部调用私有方法

privateFunc();

};

//使用prototype原型方式定义的public方法，无法访问到类的私有属性和私有方法

//使用prototype方式定义的方法为public

Person.prototype = {

setName : function(_name) {

this.name = _name;

setAge : function(_age) {

this.age = _age;

setSalary : function(_salary) {

this.salary = _salary;

show : function() {

console.log("Public Method");

}

};

四、Object.create()方法

ECMAScript第五版（目前通行的是第三版），提出了新的方法Object.create().

借助这个方法，“类”就是一个实例对象，而非函数。

var Cat= {

name : "Andy",

makeSound : function() {

console.log("makeSound Method.");

}

然后使用Object.create()生成实例，不需要用到new关键字

var cat01 = Object.create(Cat);

console.log(cat01.name); // Andy

cat01.makeSound(); // makeSound Method

目前各大浏览器的最新版本都部署了此方法，如果遇到老版本浏览器，可用下面的代码自行部署：

if (!Object.create) {

Object.create = function(o) {

function F() {};

F.prototype = o;

return new F();

}

缺点：

不能实现私有属性和私有方法，实例对象间不能共享数据。

三、极简主义法

3.1 封装

不使用this和prototype关键字，代码部署非常简单

在类里定义一个构造函数createNew(), 用以生成实例

var Cat = {

createNew : functio () {

// some code

}

};

createNew()里面，定义一个实例对象，把此实例对象作为返回值

var Cat = function() {

createNew : function() {

var cat = {};

cat.name = "Andy";

cat.makeSound = function() {console.log("makeSound Method");};

return cat;

}

};

使用：

var cat01 = Cat.createNew();

cat01.makeSound();

3.2 继承

让一个类继承另外一个类：前者createNew()中，调用后者的createNew()方法

var Animal = {

createNew : function() {

var animal = {};

animal.sleep = function() {console.log("Sleep Method.");}

return animal;

}

Cat的createNew()方法中调用Animal类的createNew()方法：

var Cat = {

createNew : function() {

var cat = Animal.createNew();

cat.name = "Andy";

cat.makeSound = function() {console.log("makeSound Method.");};

return cat;

}

如此得到Cat实例，就会继承Animal类的属性和方法：

var cat01 = Cat.createNew();

cat01.sleep(); // sleep method

3.3 私有属性和私有方法

在createNew()方法中，只要不是定义在cat对象上的方法和属性，都是私有的

var Cat = {

createNew : function() {

var cat = {};

cat.name = "Andy";

var sound = "sound"; // 私有属性

cat.makeSound = function() {

console.log(sound);

}

return cat;

}

上例内部变量sound，外部无法读取，只有通过cat的共有方法makeSound()来读取：

var cat01 = Cat.createNew();

cat01.makeSound(); //sound

3.4 数据共享

有时候需要所有实例对象，能够读写同一项内部数据；此时，把这个内部数据，封装在类对象的里面、createNew()方法外面即可：

var Cat = function() {

sound : "sound",

createNew : function() {

var cat = {};

cat.makeSound = function() {console.log(Cat.sound);};

cat.changeSound = function(sth) {Cat.sound = sth};

return cat;

}

使用：

var cat01 = Cat.createNew();

var cat02 = Cat.createNew();

cat01.makeSound(); // sound

cat02.changeSound("BiBi");

cat01.makeSound(); // BiBi

转载于:https://my.oschina.net/u/1251536/blog/413071