一、面向对象
JavaScript 中的所有事物,例如字符串、数值、数组、函数等都是对象。
现在定义“对象a”和“对象b”输出两个不同的单词“hello”和“world”。
(1)采用“面向过程”的思想,需要定义两个函数来实现:
function a(data) {
console.log(data);
}
a('hello');
function b(data) {
console.log(data);
}
b('world');
“面向过程”最直白的解释就是“谁去做什么”,即先定义a和b这两个对象,然后再分别去设置这两个对象去做什么事。
(2)采用“面向对象”的思想,只需要定义一个函数即可实现:
var Public = function(data){
this.word = data;
this.say = function(){
console.log(this.word);
};
}
var a = new Public('hello');
a.say();
var b = new Public('world');
b.say();
“面向对象”则是“这件事由谁来做”。即先设置“输出单词”这件事,然后再确定是由“对象a”、“对象b”来做这件事。
在函数“Public”中,“this”指代的是对象(即a和b),而“word”则是对象的属性,“say ”由于是一个函数,所以是对象的方法。而“Public”这种带有属性和方法的函数被称为“构造函数”。
构造函数需要用“new”进行实例化,使“对象a”和“对象b”成为Public的实例。可以理解为“对象a”和“对象b”将Public里的属性和方法全部克隆了一份,这样就会造成一个问题:如果把方法(例如上面的“say”)直接写在函数内部里,那么每次实例化一个对象,对象的方法都会复制一份(两个实例,就存在两个“say”方法),将会占用大量的内存,这时就需要用到prototype属性。
var Public = function(data){
this.word = data;
}
Public.prototype.say = function(){
console.log(this.word);
}
var a = new Public('hello');
a.say();
var b = new Public('hello');
b.say();
将函数的方法添加到函数的prototype属性上,这样每次实例化对象就不会自己再复制一份这个方法,而是共享。
二、es6的“类”--class
在java和c++等语言中,“面向对象”思想除了属性和方法外,还有一个非常重要的概念,就是“类”。
所谓“类”,就是定义对象的特征,也就是对象属性和方法的模板。
上面的Public函数就具有这样的功能,它为“对象a”和“对象b”规定了一个模版,就是这两个对象都有“word”属性和“say”方法。
所以es6之前虽然没有“类”这个概念,但也可以通过构造例如Public函数来模拟一个“类”。由此可知,es6引入的“类”并没有向js里加入什么本质性的新功能,主要也只是让代码更加清晰,风格向java等更靠拢。
将上面的Public函数改成class
class Public {
constructor(data) {
this.word = data;
};
}
say() {
console.log(this.word);
}
var a = new Public('hello');
a.say();
使用 class 最明显的便利:一是不需要写function,二就是不需要写prototype,但这并不代表class内部的方法不是写在prototype上。
class Public(){
say() {}
}
var a = new Public();
console.log(a.say === Public.prototype.say);
最终得到的结果为“true”,这表明类的所有方法都是被默认添加在类的prototype属性上。
通过 typeof a.constructor 得到的结果是“function”,由此可知constructor也是“类”的一个方法而不是属性,但这个方法很特殊,因为它是“类”必带的方法,即使不写,“类”也会默认自带这个方法:
class Public(){}
var a = new Public();
console.log(a.conconstructor);
但是如果想要正常使用“类”,那么就必须要写上constructor,因为“类”的 属性只能 写在constructor里,constructor的作用,就是初始化对象,比如给“类”的属性赋值。
"类"也可以通过表达式来定义,定义的类赋值给一个变量,这时候变量就为类名。class关键字之后的类名可有可无,如果存在,则只能在类内部使用,指代当前类,也就是相当于“this”。
var pub = class Public() {
constructor(data) {
Public.word = data;
};
say() {
console.log(Public.word);
}
}
var a = new pub('hello');
a.say();
使用表达式写法,就可以在“类”前面加上new进行实例化,这样就可以直接调用“类”的方法。
var words = new class {
constructor(data) {
this.word = data;
}
say() {
console.log(this.word);
}
}('hello');
words.say();
直接使用类名即可访问的方法,称之为“静态方法”。
class Public {
constructor(data){
this.word = data;
}
static say(){
console.log(this.word);
}
}
var a = new Public('hello');
Public.say(a);
该方法不会被实例继承,而是直接通过类来调用。
当然,“类”最大的优点,还是“继承”功能。所谓“继承”,就是函数b把函数a的方法复制到自己身上。
es6之前,最常用的继承方式有三种,分别是:prototype,apply和call+prototype。
(1)prototype:
// 父级“类”
function Parent(data){
this.words = data;
};
Parent.prototype.say = function(){
console.log(this.words);
};
// 子级“类”
function Child(){};
Child.prototype = new Parent('hello');
var a = new Child();
a.say();
使用prototype的缺点也是显而易见的,也是比较致命的,那就是子级“类”的对象在进行实例化时,传入的参数在父级“类”是无法使用的(即var a = new Child('hello')是无效的 )。
(2)apply的方式:
function Parent(data){
this.word = data;
this.say = function() {
console.log(this.word);
};
}
//子类
function Child(data){
Parent.apply(this,arguments);
}
var a = new Child('hello');
a.say();
然而如果用instance去进行判断,结果会发现a并不是Parent的实例化。
console.log(a instanceof Child); // true
console.log(a instanceof Parent); // false
并且apply虽然能通过子级“类”对象的实例化向父级“类”传参,但是apply还是只能输出一个对象的值。
(2)call+prototype的方式:
//父级“类”
function Parent(data){
this.word = data;
this.say = function() {
console.log(this.word);
};
}
//子级“类”
function Child(data){
Parent.call(this,arguments);
}
Child.prototype = new Parent();
var a = new Child('hello');
a.say();
var b = new Child('world');
b.say();
通过call+prototype,就可以实例化两个带有不同参数的对象,只是输出的结果变成了数组,并且在Parent.call时调用了一次Parent函数,在Child.prototype = new Parent(); 时又调用一次Parent函数。
class则可以通过extends来实现继承:
//定义类父类
class Parent {
constructor(data){
this.word = data;
}
say(){
console.log(this.word);
}
}
class Child extends Parent {}
var a = new Child('hello');
a.say();
var b = new Child('world');
b.say();
console.log(a instanceof Parent);
可以说,上面三种继承方式的缺点在“类”里都可以避免。当然,如果在子级“类”里添加constructor方法:
class Child extends Parent
constructor() {
super();
}
}
就必须再添加“super”,否则会报错,这是因为子级“类”没有自己的this对象,而是继承父级“类”的this对象。如果不调用super方法,子级“类”就获取不到this指代的对象。
最后一句话总结,就是用class这个关键字来创建一个类,constructor定义构造函数,用extends来实现继承。
“类”的注意事项:
1.一个类只能拥有一个名为 constructor的方法,否则出现异常。
2.类的调用必须使用new,否则会报错:
3.“类”没有提升作用,所以必须先定义类,再使对象进行实例化,否则会报错:
var a = new Public();
class Public{
constructor(data) {
this.word = data;
}
}
得到的结果是:
4.“类”的方法与方法之间不能用逗号分隔,否则会报错,分号则没问题。
5.super()只能用在子级“类”的constructor方法中,如果用在其他方法里就会报错。
参考:
1.https://wwsun.github.io/2017/06/19/javascript-oop/ (面向对象的几个概念)
2.https://github.com/dreamapplehappy/hacking-with-javascript/blob/master/points/methods-within-constructor-vs-prototype-in-javascript.md?utm_source=caibaojian.com (很好的prototype的文章)
3.http://zxc0328.github.io/2015/10/22/learn-ES6-with-babel/
4.http://www.cnblogs.com/zmxmumu/p/5588431.html (“类”的实例)
6.https://www.kancloud.cn/kancloud/javascript-style-guide/43128 (“类”的实例)
7.http://es6.ruanyifeng.com/#docs/class (“类”的知识点)
8.http://itbilu.com/javascript/js/EkR85KsBW.html
9.http://www.jianshu.com/p/58075a9a35d8
10.http://www.jb51.net/article/97925.htm
11.http://www.jianshu.com/p/342966fdf816