JavaScript基础⑤ES6中的面向对象
前言
面向对象语言的基本特征：封装，继承，多态 。 这是我们在学Java的时候，首先映入眼帘的一句话 。封装 - 顾名思义就是将一些东西（属性，方法）藏起来 ， 不让外部调用的人知道 ， 防止出现使用不当 。 继承 - 万事万物皆为天地所化 ， 同出一门而变化万千 ， 既有相同之处又有差异之所 。继承就是将共有的特征特质向下传递 ， 父传子，子传孙 ， 孙又传孙 ， 子子孙孙无穷尽也 。多态 - 万物终有始焉 ， 而好事者归为类 ， 譬如：鸟类 ， 人类 ， 然，多态始于继承 ， 子继承有父之功 ， 而可完成父之功也 。
在上篇文章中 ， 我们大致了解了JavaScript基于引用的面向对象特征 ， 但终归写起来比较麻烦 ， 在ES6标准中 ， 已经可以使用class作为类的关键字了 ， 有了常规的面向的的写法了 ， 但内部实现原理差不多 ， 只是添加了class及一些面向对象的語法糖 。使用的时候 ， 需要考虑兼容性。
ES6面向对象
ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。 -- 百度百科
基于原型的面向对象
// 基于原型 ， 创建一个Person类
function Person() {
// 类的属性
Person.prototype.name = "zeno";
Person.prototype.age = 20;
Person.prototype.job = "Software Engineer";
// 类的方法
Person.prototype.sayHello = function(){
alert("Hello "+this.name);
};
}
// 创建Person对象
var person = new Person();
alert(person.name); // out : zeno
person.sayHello(); // out ： Hello zeno
基于原型的面向对象 ， 写法上比较繁琐 ， 需要使用原型对象属性 。
ES6 对象写法
class Person {
constructor() {
var name ;
}
doSomthing() {
console.log('es6面向对象');
}
}
var p = new Person();
p.doSomthing(); // out : es6面向对象
ES6标准的面向对象语法 ，比较像java的写法 ， 但又有些不同 ， JavaScript中不能定义类属性 。
尝试类属性
class Person {
var name ;
} // out : es6.html:29 Uncaught SyntaxError: Unexpected identifier
在JavaScript中不支持这种写法。
继承 - extends
可以看出和Java的语法有点相像了 ， 不过这种写法好像很多语言都实现了 ， 例如PHP
// 父类
class Person {
constructor() {
this.name = 'zeno';
}
doSomthing() {
console.log('es6面向对象');
}
}
// 子类
class Human extends Person {
constructor() {
super();
this.job = 'software enginner' ;
}
}
var h = new Human();
console.log(h.name); // zeno
console.log(h.job); // software enginner
console.log(h.doSomthing()); // 会调用两次 ，第一次es6面向对象 ， 第二次undefined
调用console.log(h.doSomthing());会调用两次 ， 初步估计是两个类，各实例化了一次 ， 每个对象调用一次doSomthing() ， 父类输出 ， 子类因没有这个方法 ， 而产生了undefined 。但我在子类实现了doSomthing()方法 ， 结果还是执行了两次 ， 这让我不明就里 ， 暂且搁置 ， 希望知道的有心人士解惑之 。
多态
JavaScript天生支持多态 ， 因为JavaScript是动态语言，没有类型的向上向下转性 ， 方便了很多 。
封装
JavaScript在ES6中貌似支持封装 ， 但实验了一下 ， 并不可以 ，没有语法上的支持 ， 就目前来看 ， 这是JavaScript最弱的一部分了 。
不可行的封装
class Dog {
constructor() {
this._name = 'lily';
this.age = 10 ;
}
getDogName() {
return this._name;
}
get Age() {
return this.age ;
}
}
var d = new Dog();
console.log(d._name); // out : lily 可以访问到
JavaScript ES6中 ， 默认以下划线开头的属性为私有属性或方法 ， 然而并没有什么卵用 ， 一样可以访问 。
结语
JavaScript在不断的发展 ， 尤其这几年 ， 发展尤其迅速 ， 各种库 ， 如雨后春笋般迸发 ， 并应用于各个行业和领域 ，并一度向全栈发展 。
