面向对象篇[一]

一、面向对象

1、创建对象

1.1、字面量

 var obj = {
            name: '风车车',
            age: 20,
            fn() {
                console.log('我是风车车');
            }
        }

1.2、内置构造函数

var obj2 = new Object();
        obj2.name = '假老练'
        obj2.age = 20
        obj2.fn = function () {
            console.log('我是假老练');
}

console.log(obj);
obj.fn();
console.log( obj2);
obj2.fn()

1.3、工厂函数 -- 批量创建对象

function getObj(name,age,sex,email){
            var obj={
                name,
                age,
                sex,
                email,
            }
            return obj
            // var obj =new Object();
            // obj.name=name;
            // obj.age=age;
            // obj.sex=sex;
            // obj.email=email
            // return obj
        }
        let p1=getObj('momo',20,'男','321')
        let p2=getObj('kinkin',20,'女','123')
        console.log(p1);
        console.log(p2);

1.4、字面量/内置构造函数与工厂函数创建对象的弊端

字面量与内置构造函数创建对象的---弊端

​ 无法批量创建对象

工厂函数的----弊端

​ 无法判断对象的类型

1.5、自定义构造函数

// 1.构造函数首字母大写（行业规定）
function Person(name, age, gender) {
//2. 不需要手动创建对象 会自动创
//3. 给this身上添加属性方法
       this.name = name;
            this.age = age;     
            this.gender = gender;
//4. 不需要手动返回对象，对自动返回
}

 // 5.要搭配new 关键字使用（才能创建对象，否则没有意义，并且不安全）
// 语法：var 变量 = new  函数名(实参)
var p=new Person('风车车的主人',20,'男  ')
console.log(p);
console.log(typeof p);

1.6自定义构造函数存在的问题

// 解析 自定义构造函数存在的问题
 function Person(name, age) {
    this.name = name;
     this.age = age;
     this.eat = function () {
//         // 函数存储在  堆内存
         console.log(this.name + '爱吃面');
	}
 }
 var p1 = new Person('lh', 20)
 var p2 = new Person('hl', 18)
 console.log(p1, p2);
// 引用数据类型比较 比较的是引用地址
 console.log(p1.eat === p2.eat); //false 不同引用地址

// 问题 ：eat方法做的是同一件事 ，但是占用了两个引用地址
// 解决：使用一个引用地址（全局）存eat函数 ---方法共享

function Person(name, age) {
       this.name = name;
       this.age = age;
       this.eat = eat;
}
//使用函数封装
function eat() {
      console.log(this.name + '爱吃面');
}
var p1 = new Person('lh', 20)
var p2 = new Person('hl', 18)

console.log(p1, p2);
console.log(p1.eat === p2.eat); //true 

问题 ：面对对象 --- 对象封装 --- 此时 ，又将方法拿到了全局使用(不符合面向对象的编程思想) 解决：只能在构造函数身上想办法，如果构造函数可以随声存放公共方法 --- 原型对象

2、分析 构造函数搭配new关键字如何创建对象

function Dog(name,age){
// 1.默认创建了一个空对象		  ---- var obj =new Object()
// 2.默认将obj赋值给了this 	----this = obj
// 3.给this添加成员 			 ---  this.xx=xx
	this.name=name;
	this.age=age;
// 4.默认返回了this    ---    return this
}
// 上述步骤，不搭配new 关键字使用 是无效的
var d=new Dog('圆圆',5)
console.log(d);

3.构造函数创建对象分类

目的 ：学习 如果进行 对象的 分类 抽象 ：将一组对象身上公共特征抽取出来，形成一个类 类 （构造函数，构造器）：泛指 一类事物 （人 电脑 狗 门）

对象： 特指 某一个具体事物（这台教师机 ） js中没有严格的类的概念 （js不是面向对象编程语言） js中的类 是 用构造函数模拟的

// 1.对象.constructor 属性 --- 获取构造器（构造函数，类）
console.log(p.constructor === Person);
console.log(d.constructor === Dog);

// 2. instanceof 关键字 属于谁的实例（对象属于这个类码？）
// 对象 instanceof 构造函数 返回一个布尔值
console.log('*****');
console.log( p instanceof Person);
console.log( p instanceof Dog);
console.log( d instanceof Person);
console.log( d instanceof Dog);

二、原型对象

0.1为什么要使用原型对象请看【自定义构造函数存在的问题】

1. 面向对象编程的核心概念

// 构造函数（构造器，类型）：和new 一起创建对象  --母亲
// 原型对象：构造函数与生俱来的的对象（夫妻） ---父亲
// 原型成员：原型对象(prototype) 身上的 属性或者方法 eat
 Person.prototype.eat = function () {
      console.log(this.name + '喜欢吃面');
}
// 实例化：构造函数创建实例对象的过程（new）
// 实例对象 ：构造函数创建出来的新对象 ----  崽
        var p = new Person('lh', 20);
// 静态成员(showInfo)：给构造函数 身上添加的属性或者方法
Persn.showInfo = function () {
       console.log('这是一个人类');
}

// 实例对象可以访问实例成员
console.log(p.name);
console.log(p.age);
// 实例对象可以访问原型成员
p.eat()
// 实例对象不可以访问静态成员
// p.showInfo();
// 只有构造函数可以访问静态成员
Person.showInfo();

2.获取原型对象

2.1、实例对象获取原型对象

// [[prototype]]  就是 __proto__
console.log(p.__proto__);

// 发现：实例对象p身上没有constructor属性，通过 __protot__属性
// 共享原型对象身上的constructor
console.log(p.__proto__.constructor);

2.2、静态方法获取原型对象

// Object.assign() 静态成员
// 需求：使用Object的静态方法 获取 实例对象对应的原型对象
function Person(name, age) {
      this.name = name;
      this.age = age;
}
Person.prototype.eat = function () {
      console.log(this.name + '...');
}

var p = new Person('啊三', 20)
// ****Objet.getPrototypeOf(实例对象)
// Object构造函数身上的静态成员 
//用途：  获取某给实例对象的原型对象
// 注意点：链等（数学写法 ） js不能这么写 
// console.log(Objet.getPrototypeOf(p)===p.__proto__ === Person.prototype);
// 只能
console.log(Objet.getPrototypeOf(p) === p.__proto__ && p.__proto__ === Person.prototype);

3.构造函数创建实例对象的完整过程

function Person(name,age){
	this.name=name;
	this.age=age;
}

Person.prototype.eat=function(){
	console.log(this.name+'..')
}

var p=new Person('||_-.-_||',20)


构造函数创建实例对象的过程(5个步骤)
 function Person(name,age){
// 伪代码
//  1. var obj =new Object()
//  2. obj.__proto__ = Person.prototype
//  3. this =obj
//  4. this.xx=xx
//  5. return this
 }

// 问题： 凭什么p身上__proto__属性指向了Person.prototype
var obj={
    name:'||-..-||'
}
console.log(obj);
// 结论：字面量对象 是Object 构造函数的实例对象
// new 的 过程中 实例对象 的 __proto__ 属性 指向了 构造函数 原型对象

//没有new时 有原型对象吗？
// 使用dir将Person以对象的方式展开
console.dir(Person);
// 结论 ： new 与 构造函数有没有原型对象没有关系 ，构造函数的原型对象与生俱来