谈谈JavaScript如何优化构造函数和对象创建

首先,必须说明JavaScript中是不需要对象或者类的,想当然JavaScript是有面向对象是不对的,JavaScript本身最初就是被简单设计在浏览器端处理DOM的,后来OOP发展起来了,JavaScript也开始扩展了,并且开始适应OOP编程,不禁想吐槽JavaScript的函数真是太多功能了,JS使用函数实现了OOP、包等等很多概念,问题是JavaScript实现OOP的方式并不是很优雅,其实很多概念是不必要的,很多概念都是为了实现已存在的相同功能,例如原型,原型的目的就是OOP,所以面对JavaScript一些核心的概念,我们不如问一下:它是为了实现哪些已存在的概念的?

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); //  普通函数调用模式
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?