关于前端学习:Javascript面向对象

理解面向对象

• 面向对象是对面向过程的高度封装（高内聚低耦合）
• 在开发过程中，咱们须要实现某一个性能时，然而 JS 没有可能实现这项性能的对象，咱们创立一个可实现这项性能的对象
• 创立的对象是一个 有属性、有办法、并且正当的

一种面向对象语言须要向开发者提供四种根本能力

1. 封装 – 把相干的信息（无论数据或办法）存储在对象中的能力
2. 汇集 – 把一个对象存储在另一个对象内的能力
3. 继承 – 由另一个类（或多个类）得来类的属性和办法的能力
4. 多态 – 编写能以多种办法运行的函数或办法的能力

创建对象的形式

1. 字面量创立：var obj = {}
2. 内置构造函数创：var obj new Object()
3. 工厂函数创立：本人书写工厂函数，应用本人书写的工厂函数进行创建对象

// 创立工厂函数
function createPerson(name, age){
  // 手动创立一个对象
  var person = new Object();           
  // 手动向对象增加成员
  person.name = name;
  person.age = age;          
  // 创立办法
  person.showName = function(){alert("姓名："+this.name);
  }
  person.showAge = function(){alert("年龄："+this.age);
  }
  // 返回增加成员和办法的对象
  return person;
}
// 创立两个对象
var p1 = createPerson("jiangzhou", 22);
var p2 = createPerson("tom", 20);

// 调用对象办法
p1.showName();
p1.showAge();       
p2.showName();
p2.showAge();

4. 自定义构造函数创立
   构造函数：不与 new 连用时就是一个一般函数，当与 new 连用时，就具备了结构能力，构造函数里的 this 指向实例对象（创建对象时的那个变量）
   本人书写一个构造函数，应用自定义的构造函数创立一个对象

function createObj(name,age){
  // 会主动进行创立一个对象

  // 手动增加成员
  this.namee=name // this 指向以后创建对象的变量
  this.age=age    // this 指向以后创建对象的变量
  // 创立办法
  this.showName = function(){alert("姓名："+this.name);
  }
  this.showAge = function(){alert("年龄："+this.age);
  }
  // 主动返回对象
}
let obj=new createObj('Jack', 18)
// 调用对象办法
p1.showName();
p1.showAge();       
p2.showName();
p2.showAge();

构造函数的书写与应用标准

• 明确这是一个构造函数，而不是一般函数，构造函数在调用时须要与 new 连用

• 构造函数的目标就是为了创立一个 有属性 有办法 正当的 对象
  注意事项：

  1. 如果调用时没有应用 new 关键字，无奈创立一个对象
  2. 如果构造函数内书写了 return 关键字，返回的是根本数据类型，return 有效，如果返回的是简单数据类型，构造函数有效
  3. 构造函数在调用时，如果不须要传参，能够省略前面小括号（个别倡议不省略）
  4. 构造函数命名个别为首字母大写（用于辨别一般函数）
  5. 构造函数与 new 关键字连用时，会发明一个对象，这个对象叫做实例对象；创建对象的过程叫做实例化的过程；构造函数体内的 this 指向以后实例对象（本次创建对象的那个变量

function Person(name){this.name = name}
/*
在 new 的时候，Person 会发明一个对象，并将对象赋值给变量 p，这个 变量 p 
叫做 Person 的实例化对象，在本次调用中，Person 外部 this 指向变量 p
*/
let p = new Person('张山')

判断构造函数是否正当

当在构造函数外部书写一个办法的时候，每次创立一个实例化对象，这个办法都须要开拓一段空间，这样会造成空间节约，这个构造函数是的不合理

解决构造函数的不合理

利用 prototype__proto__对象拜访机制 解决构造函数的不合理：

1. 属性间接写在 构造函数体内
2. 办法写在 构造函数的 prototype 上

function Person(name,age){
  // 将属性写在构造函数体内
  this.name = name
  this.age = age
}
// 将办法写在 prototype 上
Person.prototype.sayHi=function(){console.log('hello')
}

理解构造函数中的 this指向

因为是与 new 连用，this 指向以后实例；在调用构造函数的办法时，须要依附实例对象调用，所以 this 还是指向以后实例

ES6 类语法定义构造函数

应用 class 关键字定义构造函数，定义后就是一个类，将不能当作一般函数应用，只能通过 new 失去一个对象

class 类名{
  // 结构器
  constructor(形参){
      // 书写属性
      this. 属性名 = 属性值
  }
  // 在原型上书写一个办法
  函数名(形参){执行代码}
}

小例子：

class Person{constructor(name,age){
      // 定义书写属性，this 指向实例化对象
      this.name=name,
      this.age=age
      // 调用办法
      this.init()}
  init(){console.log(this)
  }
}
let o=new Person('Jack',18)
// 通过实例进行调用办法
o.init()
console.log(o)