深入JS面向对象(原型-继承)（三）

//上面为内存图表现，p1对象跟p2对象的__proto__隔壁那个空格是指内存地址
function Person(){
    
}
var p1 = new Person()
var p2 = new Person()
//函数的执行体创建p1的对象，还有p2的对象，这个是我们一开始就通过var p1 = new Person()还有var p2 = new Person()达成的，这个对象`new Person`是构造函数，前面我们已经学习过了，然后他们身上是有隐式原型__proto__的，而隐式原型是会指向Person函数的原型对象的显示原型prototype。总结就是p1跟p2指向了构造函数，构造函数的隐式原型指向了函数的显示原型。这也就造就了下面两个true相等的原因
console.log(p1.__proto__ === Person.prototype);//true
console.log(p2.__proto__ === Person.prototype);//true

function Person(){
}
var p1 = new Person()
var p2 = new Person()
//想要取到对象中没有的属性的办法：可以在原型中直接加上去，那在p1中找不到就会去原型上找，然后就可以找到了
p1.__proto__.name = "小余"
console.log(p1.name);//小余
//但其实还有更好的办法，我们可以直接放在函数Person的显示原型里面，然后按照顺序，p1里面找不到就去p1自己的隐式原型__proto__找，如果也找不到就会继续往上追溯到Person的显式原型prototype中找，那这回可算找到了
Person.prototype.name = "XiaoYu"
console.log(p1.name);//XiaoYu
//如果我们对p2的隐式原型进行修改，一样会作用到p1身上，这是为什么？
//规范回答：new操作符导致的：这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；那么也就意味着我们通过Person构造函数创建出来的所有对象的[[prototype]]属性都指向Person.prototype
//理解回答：因为p2的隐式原型会指向Person的显式原型prototype，而p1最终也是会指向到Person的显式原型，所以他们会找到同一个地方，所以就会导致p2隐式原型的改动也会影响到p1隐式原型的改动，因为他们最终追溯到的都是一样的地方
p2.__proto__.name = "大满"
console.log(p1.name);//大满

function foo(){
}
console.log(foo.prototype,"纯foo.prototype打印")//这个打印出来是个空对象{}，但是事实上这个并不是空的，只是因为可枚举属性被设置为了false
console.log(Object.getOwnPropertyDescriptors(foo.prototype),"getOwnPropertyDescriptors打印foo.prototype");

//我们知道是事实上这个并不是空的，只是因为可枚举属性被设置为了false，那就可以采取另一种方式，将他的枚举属性设置为true，那就可以看到了
function foo(){
}
Object.defineProperty(foo.prototype,"constructor",{
    enumerable:true,
    configurable:true,
    writable:true,
    value:"小余今天抓住了一只小满"
})
console.log(foo.prototype.constructor);//能够打印出来constructor属性了
//但如果将上面defineProperty给注释掉的话，foo.prototype.constructor就会打印出另一个结果：[Function: foo]
//prototype.constructor = 构造函数本身，也就是foo函数

//我们来验证一下这句话：prototype.constructor = 构造函数本身，也就是foo函数
function foo(){
}
console.log(foo.prototype.constructor.name);//foo
//我们知道构造函数本身都是有名字的，通过在foo.prototype.constructor，也就是构造函数本身的基础上，打印了name，果然出来了foo这个名字

//我们知道这里形成了循环后，我们甚至能做出来一些骚操作
function foo(){
}
console.log(foo.prototype.constructor.prototype.constructor.prototype.constructor.name) //foo
//我们让他们两者之间不断的互相循环，最终又回到的构造函数本身，然后取出来了构造函数的名字

//没有重写之前
Person.prototype.name = "小余"
Person.prototype.age = 20
Person.prototype.learn = function(){
    console.log(this.name+"在学习");
}

function Person(){
}
//重写之后：修改之后是不是简洁很多，去掉了很多重复的元素了
Person.prototype = {//这种对象形式的写法意味着直接在内存里创建了一个新的对象
    name:"小余",
    age:20,
    learn:function(){ 
        console.log(this.name+"在学习");
    }
}

function Person(){
}
Person.prototype = {
    name:"小余",
    age:18,
  height:1.88
}
//注意多出来的这两个步骤
var f1 = new Person()
console.log(f1.name+"今年"+f1.age);//小余今年18，这里能够打印出来，但是最终指向的地方已经变成新的对象了(原因是因为我们重写了原型对象，通俗的说就是我们在prototype不再一个个等于慢慢写，而是直接使用对象的形式，省去了重复的Person.prototype.xxx = xx，这样的效果就刚刚上面说的一样，相当于在内存中创建了新的对象，构造函数Person的指向也就跟着发生了变化)，不再是Person的显式原型了

function Person(){
}
Person.prototype = {
    //constructor:Person,//注意这里，这里是我们添加上来的，但是跟原版仍然有点区别，那就是原版的enumerable是为false的，而这样添加的enumerable为true，也就是可枚举的。所以真实开发中我们一般不这么添加，真实开发的添加方法我放在下面了，也就是我们刚刚所学的方式，能够解决我们通过目前这种方式添加时enumerable为true的问题
    name:"小余",
    age:18,
  height:1.88
}
var f1 = new Person()
//真实开发中我们通过Object.defineProperty方式添加constructor
Object.defineProperty(Person.prototype,"constructor",{
    enumerable:false,
    writable:true,
    configurable:true,
    value:Person
})
console.log(f1.name+"今年"+f1.age);

//错误写法
function Person(name,age,sex,address){
    Person.prototype.name = name,
    Person.prototype.age = age,
    Person.prototype.sex = sex,
    Person.prototype.address = address
}
var p1 = new Person("小余",18,"男","福建")
console.log(p1.name);//小余
var p2 = new Person("小满",24,"男","乔家大院")
console.log(p1.name);//小满
//没错，这是错误写法，不能够这么写，因为我们在Person其实会创建一个空对象，然后绑定在this身上调用返回(内部实现，看不到的)，我们往p1，p2传入数据，第一时间肯定是先去p1跟p2各自的身上找，但很显然，我们在Person里面的代码，是直接放到他的显式原型上面了，而Person本身就什么都没有，所有当p1的数据放到显式原型上后，p2的数据紧随其后跟着放上去了，就会直接在显式原型中直接覆盖掉p1的数据。当我们使用p1.name的时候，本身找不到，紧接着去隐式原型中找，没找到，再去显式原型中找，这次找到了，但是找到的是被p2覆盖掉的数据，所有当我们p1.name拿出来的时候就会是p2的name数据

//正确写法
function Person(name,age,sex,address){
    this.name = name,
    this.age = age,
    this.sex = sex,
    this.address = address
    // this.eating = function(){
    //     console.log(this.name+"今天吃烤地瓜了");
    // }
}
//由于函数如果放在Person里面，那每次都会在构造函数中创建出一个新的，但是里面的内容其实都是一样的，所以最好的方式就是放在原型中，需要的时候顺着原型链找过去
Person.prototype.eating = function(){
    console.log(this.name+"今天吃烤地瓜了");
}
Person.prototype.running = function(){
    console.log(this.name+"今天跑了五公里");
}
var p1 = new Person("小余",18,"男","福建")
var p2 = new Person("小满",24,"男","乔家大院")
console.log(p1.name);//小余 不会发生覆盖的问题了

var obj = {
    name:"小余",
    age:20
}
Object.defineProperty(obj,"address",{
    enumerable:false,//默认false 
    value:"福建省"
})
console.log(obj);

function Person(){
    
}
var p1 = new Person()//通过了new调用，Person变为构造函数。生成新对象，由p1接收
var p2 = new Person()//但也可以称为 类，在ES6之后开始可以使用class去定义，但本质上还是通过原型、原型链 面向对象封装、继承，class它只是一个语法糖而已

// 使用传统函数
let numbers = [1, 2, 3, 4, 5];
let double = numbers.map(function(number) {
  return number * 2;
});
console.log(double); // [2, 4, 6, 8, 10]
// 使用箭头函数
let numbers = [1, 2, 3, 4, 5];
let double = numbers.map(number => number * 2);
console.log(double); // [2, 4, 6, 8, 10]

var obj = {
    name:"小余",
    age:20
}
obj.__proto__ = {
}
obj.__proto__.__proto__ = {
}
obj.__proto__.__proto__.__proto__ = {
    address:"福建省"
}
//[[get]]操作
//1.在当前的对象里面查找属性
//2.如果没有找到，这个时候会去原型对象[[__proto__]]上查找
console.log(obj.address);

console.log(obj.__proto__.__proto__.__proto__.__proto__);//[Object: null prototype] {}
//到底是找到哪一层对象之后停止继续查找了呢？
//如果每个原型后面还有原型，那不就无穷无尽吗？但显然是不可能的，原型链的尽头就是Object原型，位于我们__proto__的下一层，你本身自带一个__proto__，在prototype里面，这个__proto__打开是js替我们实现的原型，再下一层就是Object的原型了，也就是最后一层，但是如果你在自身的身上继续叠加__proto__的话，那原型链的尽头就会在这个基础上继续加，加深几层取决于你又套了几层__proto__

//创建了一个对象
var obj = {}
//创建了一个对象，相当于obj对象字面量的语法糖
var obj2 = new Object()//obj2.__proto__ = Object.prototype
function Person(){
}
//new出构造函数这个操作发生的步骤：
//1.在内存中创建一个对象，var moni = {}
//2.this的赋值，this = moni
//3.将Person函数的显示原型prototype赋值给前面创建出来的对象的隐式原型，moni.__proto__=Person.prototype
//4.执行代码体
//5.返回这个对象
var p = new Person()
//但是当我们在使用语法糖new Object()的时候，赋值的情况如下：
//var moni = {}
//this = moni
//moni.__proto__ = Object.prototype
//obj2.__proto__ = Object.prototype
//那这时候就证明了一点，obj.__protot__ === Object.prototype

var obj = {
    name:"xiaoyu",
    age:18
}
//obj.__proto__等价于Object.prototype  Object是所有类的父类 
console.log(obj.__proto__)//[Object: null prototype] {}
console.log(Object.prototype);//[Object: null prototype] {}
console.log(obj.__proto__ === Object.prototype);//true
//Object.prototype里面的东西是很多的，只是因为都是不可枚举的，所以在node环境下打印是看不见的，但是你可以打印在浏览器的控制台，这里是能看见的，就刚刚说的那样，浏览器为了方便开发者调试，所以会将不可枚举的属性也显示出来
//我们发现Object的原型对象身上也是有构造函数constructor的
console.log(Object.constructor);//[Function: Function]
//打印出Object的原型对象身上的所有属性，记得加上s 别打错啦
console.log(Object.getOwnPropertyDescriptors(Object.prototype))
//打印对象身上显式原型的隐式原型
console.log(Object.prototype.__proto__);//null，因为Object身上的原型已经是最后一层了，属于最顶层的原型，继续往下找只有null

// 定义一个构造函数Person
function Person(name) {
 this.name = name;
}
// 添加一个原型属性 sayName
Person.prototype.sayName = function() {
 console.log(`My name is ${this.name}`);
}
// 创建一个对象 person1
let person1 = new Person("John");
console.log(person1.name); // "John"
console.log(person1.sayName); // "My name is John"
// 修改原型上的属性，所有继承原型的对象会受影响
Person.prototype.sayName = function() {
 console.log(`Hello, My name is ${this.name}`);
}
console.log(person1.sayName); // "Hello, My name is John"

function Person(){
}
console.log(Person.prototype);//{},有时候看着是空的未必真的是空的
console.log(Object.getOwnPropertyDescriptors(Person.prototype))
// {
//     constructor: {
//       value: [Function: Person],
//       writable: true,
//       enumerable: false,
//       configurable: true
//     }
// }