javascript面向对象编程

如何面向对象编程？

首先，你得了解什么是面向对象！
面向对象：是一种编程思想，而不是一种语法
面向对象：关注于对象的一种思想 - 过程的升级版 - 不关注过程 - 只关注做事情参与的对象

然后，再去编程，注意面向对象不是语法，编程的时候更多的关注点在对象！
如何创建对象？
var obj = {};
var obj = new Object();
普通的对象编程

// 存储张三的信息
var zs = {
   name:"张三",
   age:12,
   gender:"男"
}

// 存储李四的信息
var ls = {
   name:"李四",
   age:13,
   gender:"女"
}

//存储王五的信息
var ww = {
   name:"王五",
   age:11,
   gender:"男"
}
console.log(zs,ls,ww);

面向对象编程

// 其实上面每个对象的结构都是一样的，可以看出每个对象的定义都是在重复
// 既然是重复，可以使用函数搞定
function fn(name,age,gender){ // 定义一个批量创建对象的函数
    // var obj = {};
    // obj.name = name;
    // obj.age = age;
    // obj.gender = gender;
    var obj = {
        name,
        age,
        gender
    }
    return obj;
}
// 批量创建相同结构对象的这个函数 - 工厂函数
var zs = fn("张三",12,"男");
var ls = fn("李四",13,"女");
var ww = fn("王五",11,"男");
console.log(zs,ls,ww);

使用这种工厂函数是有缺点的，就是你不知道这个对象代表什么？
解决这个缺点 - 就使用构造函数来解决
构造函数就是使用new来创建对象的函数 - 就叫做构造函数
哪些函数是构造函数 - 其实任何函数都可以是构造函数 - 只要在前面加new创建对象，就是构造函数

//工厂函数
// function fn(name,age,gender){
//     return {
//         name,age,gender
//     }
// }
// var zs = fn("张三",12,"男");
// 构造函数同样可以传参数
//构造函数

function Person(name,age,gender){
    // var obj = {} // new的第一步
    // this = obj;
    this.name = name; // 可以变的值
    // this关键字在构造函数中，指的是被new出来的对象
    this.age = age;
    this.gender = gender;
    // return this;
}
var zs = new Person("张三",12,"男");
console.log(zs);
// 构造函数创建对象的时候， new 操作符 具体都做了些什么？
/*
1.在构造函数中创建一个空对象
2.将函数中的this指向这个空对象
3.执行函数中的代码 - 给对象添加属性或方法，给this绑定的东西，其实就在给这个空对象绑定属性或方法
4.将这个对象返回
*/

构造函数的缺点一

function eat(){
    console.log("能吃");
}
function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    // 方法 - 给对象添加方法
    // 任何一个人具备吃的功能
    // this.eat=function(){
    //     console.log("能吃");
    // }
    this.eat = eat;
}
var zs = new Person("张三",12,"男");
var ls = new Person("李四",13,"女");
// console.log(zs,ls);
// 两个对象都有一个方法 - 吃的功能 - 两个对象的结构还是一样的
// 两个对象吃的方法是否是一样的 - 是的
// 两个对象的eat方法是不是使用的同一个堆地址？
// console.log(zs.eat === ls.eat); // false 不一样
// 表示使用的不是同一个地址 - 函数是复杂类型 - 值在堆中，地址在栈中
// 两个方法的代码一模一样，但是占用了两个内存空间 - 对于内存来说，是有一些浪费的 - 性能不高 - 有优化的空间
// 希望让这两个一模一样的方法，只占用一个空间
// 为什么会有两个空间？因为两个匿名函数就在不同的空间
// 使用有名字的函数 - 是否就可以代表同一个空间了呢
console.log(zs.eat === ls.eat); // true表示使用的是同一个地址
// 解决了浪费内存空间的问题

构造函数的缺点二

function eat(){
    console.log("能吃");
}
function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.eat = eat;
}
var zs = new Person("张三",12,"男");
var ls = new Person("李四",13,"女");
console.log(zs,ls);
// 定义了一个变量eat
var eat = "吃西瓜"
console.log(eat);
// 调用对象的eat方法
zs.eat();
// 在创建一个赵六
var zl = new Person("赵六",15,"女");
zl.eat(); // 因为eat在new之前被改变成一个变量，不是函数了
// 全局中的变量容易被覆盖了 - 全局污染

原型
原型有什么用？
给原型添加属性

Person.prototype.name = "张三";
console.log(Person.prototype);

被new出来的对象可以使用原型上的属性和方法，也就是构造函数
任何函数天生自带属性prototype，指向一个原型对象
任何对象天生字典属性__proto__，指向一个原型对象
对象访问属性或方法时，先在自己里面找，找不到就会到原型上找

利用原型解决构造函数的第二个缺点

// 缺点二：将对象的方法放在全局，容易被覆盖
// 可否放在原型上，全局是不会覆盖原型上的东西的，并且所有被new出来对象的原型，跟构造函数的原型是同一个
// 给原型绑定一个方法，然后所有被new出来的对象都能使用，使用的是同一个，原型上的方法不会被全局覆盖
function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    // 构造函数中的代码，new一次就要执行一次
}
// 在原型上绑定方法
Person.prototype.eat = function(){
    console.log("能吃");
}
// new一个对象
var zs = new Person("张三",12,"男");
var ls = new Person("李四",13,"女");
console.log(zs,ls);
zs.eat();
ls.eat();
/*
给原型绑定方法，new出来的对象就能使用，new出来的多个对象，使用的是同一个原型，原型必须通过函数的prototype或对象的__proto__才能访问到，所以不会被覆盖
*/
console.log(zs.eat === ls.eat)
// console.log(zs.__proto__);
// console.log(zs);
// zs.eat()
// zs.__proto__.eat() // 这里的__proto__可以不写

定义对象绑定属性和方法的最佳方案
最佳的解决方案：
1.通过自定义的构造函数来创建对象
2.将属性放在构造函数中给对象绑定
3.将方法绑定在原型上，new出来的对象也能访问到

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.__proto__.eat=function(){
        console.log("能吃");
    }
}
Person.prototype.eat=function(){
    console.log("能吃");
}
var zs = new Person("张三",12,"男");
// 给对象添加一个方法
var ls = new Person("李四",13,"女");
// 改变原型对象上的eat方法

原型对象
原型是对象自带的属性__proto__指向的一个对象
原型对象中天生自带一个属性叫 constructor ,指向构造函数

原型链
任何一个对象都天生自带__proto__的属性，指向原型，这个原型是个对象，只要是对象，就会天生自带__proto__的属性，也指向一个原型对象

function Person(){
    this.name = "张三"
}
var zs = new Person();
console.log(zs);
console.log(zs.__proto__); // 这是对象的原型

// 对象就会有原型
console.log(zs.__proto__.__proto__); // 这是对象原型的原型

// 对象原型的原型对应的构造函数
console.log(zs.__proto__.__proto__.constructor);

// 找原型的原型的原型
console.log(zs.__proto__.__proto__.__proto__);
// 这样形成的一条链式结构叫做原型链