学过面向对象编程语言(如C++, Java等)的同学应该都知道这些语言涉及到的概念不外乎是,“类” 、“对象” 、“对象属性” 、“对象方法” 等,然而这些面向对象的概念,在JavaScript目前版本中,没有较为鲜明的对应关系。不过,我们还是可以使用面向对象的方式来进行JavaScript编程滴~
首先,来说说JavaScript(后面使用JS代称)中的对象吧。在JS中,声明对象的方式有两种:
var person = {}; var person = new Object(); // 或 var obj = new Object;
对象声明了,接下来给对象添加属性跟方法,同样有两种表达方式:
方式1:
var person = {}; // 或者 var obj = new Object(); person.name = "张三"; person.showName = function() { console.log(this.name); };
方式2:(字面量表达)
var person = { name : "张三", showName : function() { console.log(this.name); } };
对象有了,对象属性、方法也齐了。感觉还不错!可是,如果需要批量定义对象时,按照上面方式进行的话,那得一遍遍的重复上述代码呀!!oh no ~~~
让我们想想,是不是应该有办法可以来处理呢?是的,“抽象”,我们可以利用函数的方式来提供创建对象的模板。
function Person(name) { this.name = name; this.showName = function() { console.log(this.name); }; }
通过上述代码,就创建了含有name属性和showName方法的对象模板了。可以通过如下方式进行创建对象:
var person1 = new Person("张三"); person1.showName(); // "张三"var person2 = new Person("李四");person2.showName(); // "李四" console.log(person1.showName === person2.showName); //false showName不共享
这样就解决了批量创建对象需重复编码的问题啦~
可是,新的问题又来了。每次创建一个对象,都会产生一个name属性,一个showName方法,其中name属性是根据不同对象而不同的,但是showName方法对于每一个对象都是一样的呀~要是有办法让showName方法共享的话,那不就可以节省内存咯~
接下来,prototype该登场了,在此可以放实例对象需要共享的属性或者方法。怎么使用?看看下面代码就知道啦~
function Person(name) { this.name = name; } // 所有创建的对象共享showName方法 Person.prototype.showName = function() { console.log(this.name); } var person1 = new Person("张三"); person1.showName(); var person2 = new Person("李四"); person2.showName();console.log(person1.showName === person2.showName); // true , 说明showName共享
至此,就完成了一个简单的、利用面向对象思想进行编码的JS对象及产生对象的构造函数了。这只是一个简单的入门例子,JS面向对象编程的路还很长,一步一脚印的走......
(本文是作者按照自己的思路写的,如文中描述或理解有误,欢迎指正,谢谢~)