面向对象回顾及原型讲解

面向对象回顾

核心概念：万物皆对象 （顶层对象Object）抽取行为作为方法 抽取名词作为属性

两种构建对象的方式

构造函数构建

es6的形式 class

class Person{
constructor(){ //构造器
this.name = 'jack'
}
}

es3的形式 function

function Person(){
this.name = 'jack'
}

使用new关键词

var person = new Person()

• 自动构建对象
• 手动设置属性
• 自动返回对象

工厂构建

function factory(){
var obj = new Object()
obj.name = 'jack'
return obj
}

调用方法

var person = factory()

• 手动构建对象
• 手动设置属性
• 手动返回对象

prototype

概述：所有的函数都拥有一个属性 这个属性称为prototype 他是一个对象空间（里面就可以存放对应的数据）他被称为显式原型

示例

function fn(){
}
//打印这个属性对应的空间
console.log(fn.prototype)

• constructor 构造器他指向对应的构建的函数（指向他自己）
• 根据上面的我们可以看到每个函数都有这样的一个属性,那么作为构造函数他是不是也有对应prototype属性

function Person(){
}
console.log(Person.prototype) //作为一个属性存在 属性是唯一 也就是当前他只有一个
prototype 属性的声明只会声明一次

• 作为一个属性存在 属性是唯一 也就是当前他只有一个prototype 属性的声明只会声明一次
• 因为当前这个属性 他对应的是一个对象空间，所以他里面的内容可以被更改和设置的
• 那么我们就可以在这个里面存放一些内容

function Person(){
}
Person.prototype.username = 'jack' //往这个对象空间存放一个属性 叫username
Person.prototype.age = 18 //往这个对象空间存放一个属性 叫age
Person.prototype.sayHello = ()=>{}
console.log(Person.prototype)

• 通过实例对象 来访问对应的prototype里面的属性

//取出里面数据 因为构造函数是用于构建对象的 所以我们这个prototype的里面数据 是应该给实例对象去
获取
var person = new Person()
//访问原型中数据（构造函数的prototype里面的属性）实例对象.属性名
console.log(person.username);

• 因为上面讲过 对应的prototype是作为构造函数的属性 而构造函数的他只声明一次 那么对应的prototype也只声明一次
• 也就意味者 你每次拿到的prototype是一个 也就是说他里面存放的数据也只声明一次

var person1 = new Person()
console.log(person1.sayHello == person.sayHello);//true

• 由此可见 如果想对应的数据只声明一次的情况 我们可以放在原型里面

总结

• 一般把方法放在原型里面
• 把属性放在构造函数里面

function Son(){
this.name = 'jack'
this.age = 18
}
Son.