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

首先，必须说明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如何优化构造函数和对象创建】在这里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); //普通函数调用模式