-
1.对象的三大特性:封装 继承 多态
-
// 函数的作用:封装代码,使其可复用,解决代码的重用问题
-
// 继承:少写 特点:拥有父类的所有属性和方法,还可以有自己的属性和方法
-
// 多态:解决代码的可重性, 解耦合!
-
2.对象的单体模式
为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式
-
<script> var person = { name:'小胡', age: 18, fav(){ console.log(this.name, this.age); } }; person.fav(); // 小胡 18 </script>
-
3.面向对象
-
JavaScript 语言中,生成实例对象的传统方法是通过构造函数。
-
es5构造对象: 使用构造函数来创建对象
-
// 1./*给对象添加了两个属性*/ function Animal(name,age/*形参*/){ /*为构造函数*/ // 点语法:set语法和get语法 this.name = name; //前一个name是变量,也可以设置成a1等,后一个name必须和()中的保持一致! this.age = age; } // 2.给对象添加方法 // 语法格式:class_name.prototype.method_name = function(first_argument) {}; // Animal为子级,Animal.prototype表示给父级添加,父级有,子级就有 Animal.prototype.showName = function () { //this为 Animal console.log(this.name); } /*为构造对象,函数也是对象*/ var a =new Animal('胡',18/*实参*/); console.log(a.age) ;/*打印出来18*/ a.showName(); /*打印出来'胡'*/
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的人感到困惑。
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过
class
关键字,可以定义类。基本上,ES6 的
class
可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 -
上面的代码用 ES6 的
class
改写,就是下面这样 -
es6方法构造函数,是使用class构造的,{}中为对象的单体模式,给对象添加方法,使用对象的单体模式添加(函数用fav(){}格式),
class Animal{ // 构造器 当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性 constructor(name,age){ this.name = name; this.age = age; } // 一定不要加逗号,加了会报错 showName(){ console.log(this.age); } } var a2 = new Animal('小胡',12);
a.showName1(); /*打印出来'12'*/
上面代码定义了一个“类”,可以看到里面有一个constructor
方法,这就是构造方法,而this
关键字则代表实例对象。也就是说,ES5 的构造函数Animal,对应 ES6 的Animal类的构造方法。
Animal类除了构造方法,还定义了一个showName方法。
注意,定义“类”的方法的时候,前面不需要加上function
这个关键字,直接把函数定义放进去了就可以了。
方法之间不需要逗号分隔,加了会报错。
ES6 的类,完全可以看作构造函数的另一种写法。
console.log(Animal2===Animal2.prototype.constructor);//true
上面代码表示,类本身就指向了类的构造函数。
使用的时候,也是直接对类使用new
命令,跟构造函数的用法完全一致。
constructor方法
constructor
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加。
class Animal { } // 等同于 class Animal { constructor() {} }