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

var obj = {
    _age:20,
}
Object.defineProperties(obj,{
    name:{
        //是否可配置
        configurable:true,
        //是否枚举
        enumerable:true,
        //添加新值
        value:"小余",
        //是否可写入
        writable:true
    },
    age:{
        configurable:false,
        enumerable:false,
        get:function(){
            return this._age
        },
        set:function(value){
            this._age = value
        }
    }
})
//获取某一个特征属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj,'name'));
//{ value: '小余', writable: true, enumerable: true, configurable: true }这个就是name的配置了
console.log(Object.getOwnPropertyDescriptor(obj,'age'));
//{
//  get: [Function: get],
//  set: [Function: set],
//  enumerable: false,
//  configurable: false
//}
//获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj));//请注意这个的区别跟上面那个最后多了一个s
// {
//     _age: { value: 20, writable: true, enumerable: true, configurable: true },
//     name: { value: '小余', writable: true, enumerable: true, configurable: true },
//     age: {
//       get: [Function: get],
//       set: [Function: set],
//       enumerable: false,
//       configurable: false
//     }
// }

//禁止对象继续添加新的属性
var obj = {
    _age:20,
}
Object.preventExtensions(obj)
obj.name = "小余"
obj.sex = "男"
console.log(obj);//{ _age: 20 }，阻止添加成功

//禁止对象配置/删除里面的属性
//麻烦的方式：
var obj = {
    _age:20,
    name:"小余"
}
for(var key in obj){
    Object.defineProperty(obj,key,{
        //将每一个属性都设置为不可配置，包括禁止删除里面的属性
        configurable:false,
        value:key
    })
}
console.log(Object.getOwnPropertyDescriptors(obj));//自己打印出来看看结果，其中的configurable确实都为false了
//简单的方式：
Object.seal(obj)//尝试将这行代码注释掉，看前后对比
//验证方式1：
delete obj.name
console.log(obj.name);
//验证方式2：
console.log(Object.getOwnPropertyDescriptors(obj));

//让属性不可以修改(相当于让writablel:false)
var obj = {
    //私有属性(js中没有严格意义上的私有属性，你依旧可以通过obj._age访问到，但是外人是不知道这个隐藏起来的属性，只知道他的替代obj.age)
    _age:20,
    name:"小余"
}
Object.freeze(obj)
obj.name = "小满zs"
console.log(obj);//{ _age: 20, name: '小余' }，name没有被修改为"小满zs"

var p1 = {
    name:"小余",
    age:20,
    sex:"男",
    address:"福建",
    eating:function(){
        console.log(this.name+"在吃烧烤");
    },
    running:function(){
        console.log(this.name+"在跑步做运动");
    }
}
var p2 = {
    name:"小满",
    age:23,
    sex:"男",
    address:"北京",
    learn:function(){
        console.log(this.name+"在学编程");
    },
    running:function(){
        console.log(this.name+"在跑步做运动");
    }
}
var p3 = {
    name:"洛洛",
    age:20,
    sex:"女",
    address:"福建",
    learn:function(){
        console.log(this.name+"在学Go语言跟rust语言");
    },
    running:function(){
        console.log(this.name+"在内卷");
    }
}
//以上的方式过于相似，存在过于重复的代码，我们能不能进行优化呢，用另一种方式创建？

function createPerson(){
}
//我们虽然里面属性大多数都是相同的，但是数据是不一样的，比如p1的name是小余，p2的是小满，p3的是洛洛，这个时候我们就可以向调用的里面传入参数来实现我们不同数据的传输
var p1 = createPerson()
var p2 = createPerson()
var p3 = createPerson()

//上面那个空模板的改善方式，传入参数
function createPerson(name,age,sex,occupation,address){
  var p = new Object()
    p.name = name
    p.age = age
    p.sex = sex
    p.occupation = occupation
    p.address = address
    p.eating = function(){
        console.log(this.name + "在吃满汉全席")
    }
    return p
}
var p1 = createPerson("小余",20,"男","大二学生","福建",)
var p2 = createPerson("小满",24,"男","京东程序员","北京")
var p3 = createPerson("洛洛",20,"萌妹子","Go+Rust+JavaScript+Node.js全栈工程师兼小余的同学",'福建')
console.log(p1,p2,p3);
//打印效果如下：
// {
//     name: '小余',
//     age: 20,
//     sex: '男',
//     occupation: '大二学生',
//     address: '福建',
//     eating: [Function (anonymous)]
//   } {
//     name: '小满',
//     age: 24,
//     sex: '男',
//     occupation: '京东程序员',
//     address: '北京',
//     eating: [Function (anonymous)]
//   } {
//     name: '洛洛',
//     age: 20,
//     sex: '萌妹子',
//     occupation: 'Go+Rust+JavaScript+Node.js全栈工程师兼小余的同学',
//     address: '福建',
//     eating: [Function (anonymous)]
//   }

1. 通过上述console.log(p1,p2,p3)打印出来的是我们的字面量
2. 缺少对象应该有的类型，只能看到是Prototype那里的类型都是Object，这种形容过于宽广，分类不够具体。因为人是动物，猫咪也是动物，但两者是不能够混为一谈的。获取不到对象最真实的类型
3. 我们想要达到的效果是：当我们拿到p1、p2、p3的时候，我们还能够知道他们对应的类型，知道这是由什么产生的，而这个是工厂函数没办法做到的事情
//如果你对上面的类型还一知半解，也可以参考我的想法，我认为这是分类过于模糊，我们通过工厂函数创建出来了一个"人"，他身上的属性有姓名，身高，职业，性别等等，我们通过工厂函数传入参数也只是对数据进行改变，他本质上的属性是一样的，脱离不了人本身，最多一个叫小余，另一个叫小满，两个不一样的人，但都是人。这个时候我们希望调用工厂函数这个函数的时候，告诉我们类型是人，具体一些，而不是"宇宙中存在的东西"，那太过于宽广，实在是跟没说一样，毕竟你抽象出来的东西哪个不是宇宙中的东西对吧

function foo(){
    var moni = {}
    this.moni
}
//new foo相当于会默认执行上面这两个步骤(平时是不显示的，内部自己执行的)，然后进行我们的第五步返回创建出来的新对象，不需要我们手写return返回值

function foo(){
    console.log("foo~");
}
var f1 = new foo//foo~
console.log(f1);//foo {} 确实创建出来的一个空对象，且类型就是foo
//很明显类型精准了很多，如果上面不够明显，我们可以再来一个案例(输出xiaoyu {}，已经很能证明了吧)
function xiaoyu(){
    console.log("我是小余");
}
var f1 = new xiaoyu//我是小余
console.log(f1);//xiaoyu {}，node打印结果

function foo(){
    console.log("foo~");
}
//foo就是一个普通的函数
foo()
//换一种方式来调用foo函数，使用操作符new
new foo()//一旦我们通过new这样调用，那么这个函数就是一个构造函数了
new foo //我们甚至可以不写这个小括号
//上面3处调用的结果都是foo~，全部成功调用。请注意我说的是3处，也就是上面第四点说的：执行函数的内部代码（函数体代码）
//当我们通过new去调用一个函数时，和普通的调用到底有什么区别？

function add(a, b) {
  return a + b;
}

let sum = add(1, 2); // sum的值为3

function square(x) {
  console.log(x * x);
}
let result = square(2); // 输出4，result的值为undefined

function xiaoyu(name,age,sex,address){
    this.name = name
    this.age = age
    this.sex = sex
    this.address = address
    this.eating = function(){
        console.log(this.name + "在吃鱿鱼须");
    }
    this.runding = function(){
        console.log(this.name + "在跟坤坤打篮球");
    }
}
var f1 = new xiaoyu("小余同学",20,"男","福建")
console.log(f1);
// xiaoyu {
//     name: '小余同学',
//     age: 20,
//     sex: '男',
//     address: '福建',
//     eating: [Function (anonymous)],
//     runding: [Function (anonymous)]
//   }
//然后跟工厂函数一样的，我们可以进行重复描写
var f2 = new xiaoyu("小满zs",23,"男","北京")
var f3 = new xiaoyu("洛洛",20,"萌妹子","福建")
//很明显，在开头多了一个类型xiaoyu，是不是更加明确清晰了。你想要的任意类型都能够自己更加精准的定位，你写ikun都行

function XiaoYu(){
//对于构造函数，我们函数名首字母会是大写。如果由多个单词组成的话，则是采用大驼峰标识
}

function foo(){
    function bar(){
        console.log("你猜一不一样");
    }
    return bar
}
var f1 = foo()
var f2 = foo()
console.log(f1 === f2);//false

//我们还可以拿刚刚的案例来试一下
function xiaoyu(name,age,sex,address){
    this.name = name
    this.age = age
    this.sex = sex
    this.address = address
    //我们这里的创建对象，相当于在对象里再重复的创建对象其实是没有必要的，就是每个对象的函数去创建一个函数对象实例；为什么这个会是缺点看上面第三点
    this.eating = function(){
        console.log(this.name + "在吃鱿鱼须");
    }
    this.runding = function(){
        console.log(this.name + "在跟坤坤打篮球");
    }
}
var f1 = new xiaoyu("小余同学",20,"男","福建")
var f2 = new xiaoyu("小余同学",20,"男","福建")
//name其实都是"小余同学"，他们的值是没有区别的，造成他们不相等的原因是：每个对象都有不同的原型，所以不相等
console.log(f1.eating === f2.eating);//false
console.log(f1.runding === f2.runding);//false

//我们每个对象中都有一个[[prototype]]，这个属性可以称之为对象的原型(隐式原型)，这里很重要
//称呼为隐式原型的原因：1.平时看不到2.以后也不会去改他3.也不会去使用他。我们只会利用他的底层原理来使用他
//解释原型的概念和看原型
var obj = {name:"小余"}
console.log(obj);//在node打印是看不到隐藏起来的[[prototype]]的，这个需要到浏览器的控制台去看一下(也就是功能是浏览器提供的)
console.log(obj.__proto__);//[Object: null prototype] {}

//通常情况下我们是不能使用__proto__这个原型的，如果你真的想要获取这个对象的话，有提供另一个办法供你获取
var obj = {name:"小余"}
//获取obj的原型，是ES5之后提供的方法，不是浏览器提供的
console.log(Object.getPrototypeOf(obj));//node打印出来的结果：[Object: null prototype] {}

//当我们从一个对象中获取某一个属性时，它会触发[[get]]操作
var obj = {name:"小余"}
console.log(obj.age)//像这样取值的时候就会触发get操作，操作分2步
//1.在当前对象中去查找对应的属性，如果找到就直接使用
//2.如果没有找到，会沿着原型去查找，也就是var obj = {name:"小余",__proto__}，先从前面开始找，没找到再从__proto__(原型)找

//我们在上面是找不到obj的age属性的，因为我们都没有定义age这个属性，age除了obj.age = 18这种方式之外，还可以直接赋值在原型中，也能够找到，这就是顺着原型去查找的
var obj = {name:"小余"}
obj.__proto__.age = 18
console.log(obj.age)//18
//为什么要这么麻烦，要放到原型中，不直接放到对象里面呢？这是为了方便我们后续实现继承

function foo(){
    
}
////函数作为对象来说，它也是有[[prototype]]隐式原型的
console.log(foo.__proto__)//{}
//函数因为它是一个函数，所以还会多出来一个显示原型属性，叫做prototype
console.log(foo.prototype)//{}，这个属性是没有兼容性问题的，ECMA一开始就定义了这个属性

var obj = {}
console.log(obj.prototype)//obj就没有这个属性，undefined

//代码的内部实现如下
function foo(){
    var moni = {}
    this = {}
    this.__proto__ = foo.prototype//隐式原型指向显示原型
}

function foo(){
}
var f1 = new foo()
var f2 = new foo()
//这就是构造函数的f1跟f2的隐式原型会指向函数的显示原型
console.log(f1.__proto__ === foo.prototype);//true
console.log(f2.__proto__ === foo.prototype);//true