js基础16(面向对象、静态属性和方法)

1、原型

new的特性
1.创建一个对象
2.new执行函数内部的this指向这个new创建的对象
3.new执行的本次函数结束时，默认返回这个new创建的对象

function fun(){

};
// 这是一个原型，原型也是一个对象，所有他有对应的类的原型
// _proto_上面
// obj.__proto__ === fun.prototype
fun.prototype = { // 为了给实例提供公有的属性
  constructor : fun
}
const obj = new fun(); // 就是类的实例化，obj就是fun类的实例

• 判断一个属性是否是原型上的，
  判断方法：hasOwnProperty
  私有属性返回true，在原型上的返回false
• instanceof 用于确定obj1是上是否存在于obj2的原型链上

function fun(){
  this.name = arguments[0]; // 这个名字是不定餐的第一个参数
}
fun.prototype = {
  constructor: fun,
  age: 18
}
const obj = new fun("hr");
console.log(obj.hasOwnProperty("name")); // 私有属性 true
console.log(obj.hasOwnProperty("age")); // 公有 false
function fun1(){}
console.log(obj instanceof fun1); // false

// es5
function Person(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype = {
  add(value){console.log(value)}
}
const obj = new Person("hr", 18);

// es6
class Person{
  constructor(name, age){ // 就是对象，私有属性
    this.name = name;
    this.age = age;
  }
  // 这之间不要加任何的符号
  // constructor之外的方法都是公有
  add(value){cosole.log(value)}
}
const obj = new Person("hr", 18);

2、原型继承

继承就是儿子要有父亲的，儿子必须有父亲的公有和私有属性

// 父类，基类(模板)
function p1(opt){
  this.money = opt.money;
  this.house = opt.house;
}
p1.prototype.add = function(){
  console.log(this.name);
}
// 子类，继承父类
function p2(opt){
  p1.call(this,opt); // 继承父类/基类的私有
  this.car = opt.car;
}
p2.prototype.add = function (){
  console.log(this.house);
}
// 第一种方案（子类继承会破坏基类的地址，不可取）
// p2.prototype = p1.prototype; // 这个是一个对象，是一个引用数据类型
// 第二种方案（__prototype__里面会显示undefined）
// p2.prototype = new p1({});
// 第三种方案（__prototype__里面无undefined）
// function middle(){};
// middle.prototype = p1.prototype;
// p2.prototype = new middle();
// 第四种方案（不能继承原型链上的属性，只能取到p1父类/基类上的属性）
for(var key in p1.prototype){
  p2.prototype[key] = p1.prototype[key];
}
const op1 = new p1({ // 把基类这个对象存到p2的原型上
  money: "2亿",
  house: "海景别墅十套",
})
const op2 = new p2({ // 我们不需要一个个传，可以传递一个对象的方式
  money: "1亿",
  house: "海景别墅五套",
  marry: "富婆"
})
op1.add(); // undefined
console.log(op2);

3、对象的拷贝

原型的继承也就是对象的继承，其实也是对象的拷贝
对象的拷贝：

• 浅拷贝：新对象跟原对象内容相同，指向同一个地址，新对象改变，原对象也会改变
• 深拷贝：新对象跟原对象内容相同，但不指向同一个地址，新对象改变，原对象不会改变

• 深浅拷贝方法（支持拷贝函数）

const obj1 = {
  a: 1,
  b: ["a", "b"]  
};
// 深浅拷贝方法（支持拷贝函数）
function extend(obj, deep){
  // deep: false浅拷贝  true深拷贝
  var curObj = {};
  // 判定对象是数组
  if (obj instanceof Array){
    curObj = [];
  }
  for(var key in obj){
      var value = obj[key]
      // 判断value是否是引用类型，并且当前是深浅拷贝
      curObj[key] = (!!deep && typeof value === "object" && value !== null) ? 
            extend(value, deep) : value;
      // deep是true则为深拷贝，false是浅拷贝；两次取反deep是为了把deep转为布尔值
      // 深拷贝，则要对引用类型继续深拷贝
  }
  return curObj;
}
// 默认是情况是浅拷贝，所以不用写
const obj2 = extend(obj1, true);
obj2.b.push("x");
console.log(obj1);
console.log(obj2);

• 深拷贝方法（不支持拷贝函数）

const obj1 = {
  a: 1,
  b: ["a", {
    c: ["h"]
  }]
}
// 对象先转json字符串，再转为json对象
const obj2 = JSON.parse(JSON.stringify(obj1));

• 深拷贝方法（es6）

// 父类
class p1{
  constructor(x){
    this.x = x;
  }
  add(){
    console.log(this);
  }
}
class p2 extends p1{
  constructor(x){
    super(x); // 不写这步，子类没有this
  }
  sum(){
    console.log("hello");
  }
}
const op1 = new p1("0");
const op2 = new p2("1");
op1.add(); // {x: "0"}
op2.add(); // {x: "1"}
// op1.sum(); // 父类不会有子类自己的方法
op2.sum(); // hello

4、静态属性和方法

只能被类调用的属性和方法

// es5 静态属性、方法
// 这是一个类
function myClass(){}
myClass.daying = function (){
  console.log("这是一个静态方法");
}
const obj = new myClass(); // 实例

// es6  只有静态方法
class myClass1{
  constructor(){}
   static dayjing(){} // 只能是静态方法
}