面向对象

面向对象,强调的是类的概念,通过创建类,可以创建无数个具有相同方法和属性的实例对象,面向对象的概念就是要把一件事分成很多小的易于实现且复用的更小的方法,在后再将这些小的方法变成一个整体。

构造函数

ES6之前就是我们定义的function

ES6之后新增的class里面就是constructor

一个构造函数就是一个类,我们可以通过构造函数创建出无数多个实例对象;

1、构造函数也是普通函数;

2、构造函数我们一般约定:

3、函数名称首字母大写;

4、用 new 运算符实例化对象;

5、我们在构造函数中创建的属性和方法都是私有的,属性可以私有,但是方法不一定是私有的,所以我们要引入:原型prototype(该方法主要用于ES6之前通过function的构造函数) 来实现方法的公有化。

原型 prototype

所有的函数都具有一个共有的属性:原型对象,原型上面绑定的是共有的属性或者方法,并且构造函数中的 this 在实例化后指向对应的实例对象。

  1. // 原型(prototype):每一个函数都有一个原型对象(属性),原型上面绑定是公有的属性或者方法,而且里面的this依然指向实例对象。
  2. function Array() {
  3. this.length = arguments.length; //系统提供的所有属性都是写在构造函数里面。
  4. }
  5. Array.prototype.push = function() {
  6. //系统提供的所有实例方法都是绑定在原型上面。
  7. ...
  8. return this.length
  9. };
  10. let arr1 = new Array(1, 2, 3);
  11. let arr2 = new Array(4, 5, 6, 7);
  12. console.log(arr1.push(40, 50, 60)); //6
  13. console.log(arr1); //[1,2,3,40,50,60]
  14. console.log(arr1.push == arr2.push); //true

class 改写面向对象写法

1.传统的面向对象写法(混合开发:构造函数+原型)

  1. function Person(name, age) {
  2. this.name = name;
  3. this.age = age;
  4. }
  5. Person.prototype.init = function() {
  6. return this.name + this.age;
  7. };
  8. let p1 = new Person('zhangsan', 18);
  9. console.log(p1.init());

2.ES6最佳的面向对象写法(class开发)

语法糖:也译为糖衣语法,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。

ES6 提供了更接近传统语言(后端)的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5之前都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

  1. class Person {
  2. constructor(name, age) { //构造函数
  3. this.name = name;
  4. this.age = age;
  5. }
  6. init() { // 原型
  7. return this.name + this.age;
  8. }
  9. }
  10. let p1 = new Person('zhangsan', 18);
  11. console.log(p1.init());// zhangsan18
  12. console.log(typeof Person); //function