js中的继承

构造函数继承

  • 继承：子类继承父类所有属性和行为，父类不受影响。
  • 目的：找到类之间的共性精简代码
//构造函数继承只能继承对象内部方法
function Person(name){
    this.name = name;
    this.eyes = "两只";
    this.legs = "两条";
}
function Student(name){
    Person.call(this,name);
   // Person.apply(this,[name]);
  //  Person.bind(this)(name);
    this.className = "二班";
}
let newPerson = new Student("张三");
console.log(newPerson.className);

为了实现原型的继承可以使用原型的赋值

  • 但是简单原型继承,出现影响父类的情况；
function Dad(height){
    this.name = "张三";
    this.age = 20;
    this.height = height;
    this.money = "$1000000";
}
Dad.prototype.hobby = function(){
    console.log("喜欢高尔夫");
}

function Son(height){
    Dad.call(this,height);
    // Dad.apply(this,[height])
    // Dad.bind(this)(height);
}
Son.prototype = Dad.prototype  //直接赋值
Son.prototype.hobby = function(){
    console.log("篮球");
}
let newSon = new Son("178cm");
// console.log(newSon);
newSon.hobby(); // 篮球
let newDad = new Dad("179cm");
newDad.hobby(); //篮球
//输出两个都是显示篮球，父类方法被覆盖了继承方法不可靠
  • 组合继承 修改子类原型的指向，添加一个构造函数做为媒介
  function Dad(){
      this.name = "张三";
  }
  Dad.prototype.hobby = function(){
      console.log("高尔夫");
  }
  function Son(){
      Dad.call(this);
  }
  let F = function(){}
  F.prototype = Dad.prototype;
  Son.prototype = new F(); // 新开辟内存地址
  Son.prototype.constructor = Son;
  Son.prototype.hobby = function(){
    console.log("篮球");
};
let newSon = new Son("178cm");
// console.log(newSon);
newSon.hobby(); // 篮球
let newDad = new Dad("179cm");
newDad.hobby(); //高尔夫

原型的深拷贝继承

  • 传值和传址问题

    • 基本数据类型：Number、String、Boolean、Null、Undefined 拷贝不存在传值问题
    • 复杂数据类型/引用数据类型:Array、Date、Math、RegExp、Object、Function等存在拷贝传值问题
   let a = 10;
    let b = a;
    b = 20;
    console.log(a); // 10  b 改版没有影响a 的值
    let obj = {
        name: "张三",
        age: 20,
        arr: [1, 2, 3],
        obj3: {
        },
        test: undefined,
        fn: function () {
            console.log("fn...");
        },
        test2: null
    }
  let obj2 = obj;
    obj2.age = 30;
    console.log(obj); /*{name: "张三", age: 30, arr: Array(3), obj3: {…}, test: undefined, …}
age: 30
arr: (3) [1, 2, 3]
fn: ƒ ()
name: "张三"
obj3: {}
test: undefined
test2: null
__proto__: Object*/
// 结果显示obj 属性age被修改了
  • 采用JSON序列化拷贝对象
let obj2 = JSON.parse(JSON.stringify(obj));
obj2.age = 30;
console.log(obj2); 
/*{name: "张三", age: 30, arr: Array(3), obj3: {…}, test2: null}
age: 30
arr: (3) [1, 2, 3]
name: "张三"
obj3: {}
test2: null
__proto__: Object*/
console.log(obj); /* {name: "张三", age: 20, arr: Array(3), obj3: {…}, test: undefined, …}
age: 20
arr: (3) [1, 2, 3]
fn: ƒ ()
name: "张三"
obj3: {}
test: undefined
test2: null
__proto__: Object*/

-JOSN序列化的不足

如果拷贝对象包含函数，或者undefined等值，此方法就会出现问题
  • 浅拷贝和深拷贝
  //递归深拷贝
  function deepCopy(obj){
      let newObj = Array.isArray(obj)?[]:{};
      for(let key in obj){
          if(obj.hasOwnProperty(key)){
              if(typeof obj[key] == "object"){
                  newObj[key] = deepCopy(obj[key]);
              }else{
                  newObj[key] = obj[key];
              }
          }
      }
      return newObj;
  }
 let obj2 = deepCopy(obj);
    console.log(obj2);/*{name: "张三", age: 20, arr: Array(3), obj3: {…}, test: undefined, …}
age: 20
arr: (3) [1, 2, 3]
fn: ƒ ()
name: "张三"
obj3: {}
test: undefined
test2: null
__proto__: Object*/拷贝成功
  • 深拷贝继承
 function Dad(){
     this.name = "张三";
 }
 Dad.prototype.hobby = function(){
     console.log("高尔夫");
 }
 function Son(){
     Dad.call(this);
 }
 Son.prototype = deepCopy(Dad.prototype); // 新开辟内存地址
 Son.prototype.constructor = Son;
 Son.prototype.hobby = function(){
console.log("篮球");
};
let newSon = new Son("178cm");
newSon.hobby(); // 篮球
let newDad = new Dad("179cm");
newDad.hobby(); //高尔夫

原型的继承

  • 原型链是指对象在访问属性或方法时的查找方式。

1.当访问一个对象的属性或方法时，会先在对象自身上查找属性或方法是否存在，如果存在就使用对象自身的属性或方法。如果不存在就去创建对象的构造函数的原型对象中查找 ，依此类推，直到找到为止。如果到顶层对象中还找不到，则返回 undefined。

2.原型链最顶层为 Object 构造函数的 prototype 原型对象，给 Object.prototype 添加属性或方法可以被除 null 和 undefined 之外的所有数据类型对象使用。

  function Drag(){
    this.ele = "some value..."
  }
 Drag.prototype.ele = "prototype value....";
let drag1 = new Drag();
console.log(drag1.ele); // 输出some value...


 function Drag(){
   // this.ele = "some value..."
  }
 Drag.prototype.ele = "prototype value....";
let drag1 = new Drag();
console.log(drag1.ele); // 输出 prototype value....


 function Drag(){
   // this.ele = "some value..."
  }
// Drag.prototype.ele = "prototype value....";
Object.prototype.ele = 'Object.value...';
let drag1 = new Drag();
console.log(drag1.ele); // 输出 Object.value...

ES6中的类

  • 类的写法
class Person{
    height="178cm";
    constructor(name,age){
        //属性
        this.name = name;
        this.age = age;
    }
    //方法
    getName(){
        console.log("姓名是:"+this.name);
    }
}
let student = new Person("张三",20);
student.getName();

  • 静态方法和属性:实例不会继承的属性和方法

    class Person{
    //静态方法
    static hobby(){
        console.log("喜欢篮球");
    }
}
//静态属性
Person.height = "178cm";
//通过类来调用
Person.hobby();
console.log(Person.height);

  • 类的继承:extends

    class Dad{
    name = "张三";
    age = 40;
    constructor(height){
        this.height = height;
    }
    hobby(){
        console.log("喜欢篮球");
    }
}
class Son extends Dad{
    constructor(height){
        //表示父类的构造函数
        super(height);
    }
}
let son1 = new Son("178cm");
son1.hobby();
console.log(son1.height);

包装对象

  • 除过null,undefined，基本类型都有自己对应的包装对象：String Number Boolean
  • 包装对象把所有的属性和方法给了基本类型，然后包装对象消失

常用方法

  • hasOwnProperty()：看是不是对象自身底下的属性
  • contructor查看对象的构造函数 可以用来做判断
  • instanceof:对象与构造函数是否在原型链上有关系
  • toString()判断类型； 转换字符串 进制转换
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • JS中的继承：ES3、ES5 和 ES6的区别
    选择一种继承方式 JavaScript 是一门动态语言，动态意味着高灵活性，而这尤其可以体现在继承上面。JavaS...
    George_Wm阅读 1,556评论 0赞 0
  • JS中的继承（ES5）
    前言 ES6之前，没有严格意义上的class继承， 其实JS（ES5）主要是依靠原型链来实现继承的。 既然要实现继...
    Mica_马超阅读 976评论 0赞 2
  • js中的继承-原型与原型链
    面向对象的语言支持两种继承方式，接口继承和实现继承js无法实现接口继承，只支持实现继承，主要通过原型链来实现。具体...
    jadefan阅读 129评论 0赞 2
  • js中的继承
    方式一、原型链继承 分析： 这种方式实现的本质是通过将子类的原型指向了父类的实例，子类的实例就可以通过proto访...
    tency小七阅读 248评论 0赞 0
  • 03.js中的继承
    # 概述 本文主要记录js中实现继承的几种方法的实现，优缺点分析 # 知识铺垫 + **构造函数，原型和实例的关系...
    HLE阅读 652评论 0赞 0