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

    推荐阅读