首先,必须说明JavaScript中是不需要对象或者类的,想当然JavaScript是有面向对象是不对的,JavaScript本身最初就是被简单设计在浏览器端处理DOM的,后来OOP发展起来了,JavaScript也开始扩展了,并且开始适应OOP编程,不禁想吐槽JavaScript的函数真是太多功能了,JS使用函数实现了OOP、包等等很多概念,问题是JavaScript实现OOP的方式并不是很优雅,其实很多概念是不必要的,很多概念都是为了实现已存在的相同功能,例如原型,原型的目的就是OOP,所以面对JavaScript一些核心的概念,我们不如问一下:它是为了实现哪些已存在的概念的?
JavaScript的其中一个目的是实现OOP面向对象编程,OOP的第一步就是创建对象,本文谈论的正是JS的对象创建问题,JavaScript中有两种方式创建对象,字面量和构造函数,字面量的实质也是调用了构造函数,例如:
var Language = {}; // 默认调用new Object()
function Language(){ // 自定义构造函数
}
var lang = new Language();
JavaScript构造函数和对象创建
在这里JavaScript首先面临一个OOP的问题,类的模板封装和创建,但是JavaScript没有类,只能使用函数,当然就是构造函数了,构造函数的名字就是类名,像其它语言类名和构造函数同名一样,而且一般首字母大写,这更好区分这是一个类,JS面向对象的构造函数和对象创建的实例如下:
/**
* JS面向对象
*/
/**
* 一、使用构造函数创建对象
* 1、创建一个空对象
* 2、把空对象赋值给this
* 3、执行构造函数里面代码
* 4、将新创建的对象返回(简单类型同样返回this,引用类型返回引用对象)
*/
// class User{ 类名
function User(username, age){ // 构造函数内的所有变量和方法都是子类对象私有
this.username = username;
this.age = age;
this.run = function(){
console.log(this.username + " running...");
};
}
// }
var user = new User("Janis", 18);
user.run();
console.log(user.username, user.age);
console.log(user instanceof User);
console.log(user);
var user1 = new User("Temp", 12);
user1.run();
console.log(user1);
console.log(user.run === user1.run); // => false
/**
* user和user1均使用User()构造函数
* 但是这两个对象都有自己的run方法,run方法不能实现共用
*/
/**
* 二、使用原型创建对象
*/
function Song(singer, lyrics){
this.singer = singer;
this.lyrics = lyrics;
}
Song.prototype.sing = function(){
console.log(this.singer + " sing " + this.lyrics);
}
var song1 = new Song("Eason", "a day of that day");
var song2 = new Song("Babel", "a dog under the tree");
song1.singer = "Webpack"; // 父类和子类均有singer属性
song1.sing();
song2.sing();
console.log(song1.sing === song2.sing); // true
/**
* song1添加自己的singer私有属性
*/
/**
* 三、面向对象之组合构造函数
*/
function Movie(title, time){ // 属性私有,一般在构造函数中添加属性
this.title = title;
this.time = time;
}
Movie.prototype.play = function(){ // 函数共用,一般在原型父类中添加
console.log(this.title + " playing...");
};
/**
* 四、委妥构造函数模式
* 同时适合构造函数和函数方式创建对象
* 但是无法使用instanceof找到原型对象
*/
function Text(font, size){
var obj = {};
obj.font = font;
obj.size = size;
return obj;
}
var text1 = new Text("apple", 14); // 构造函数调用模式
var text2 = Text("Console", 16); // 普通函数调用模式