JS高级 03

JS实现继承的方式

• 1.属性拷贝
• 2.原型式继承
• 3.原型链继承
• 4.借用构造函数继承|伪对象继承|经典点继承
• 5.组合继承
• 6.Object.create()
• 7.完全拷贝

属性继承

• 混入式继承/ 属性拷贝(两种方式)
• 特点: 属性是引用类型,数据会共享
  • for --- in 循环

var obj = {
    name :'zs'
    ,age:20,
    friends:['小明','小红']
}

var obj1 = {};

for(var key in obj){
    obj1[key] = obj[key]
}

obj1.friends.push('老王')

console.log(obj1);
console.log(obj);

// 如果属性是引用类型的数据,子对象和父对象会共享同一份数据,修改其中一个,会影响另外一个

• 函数拷贝属性/ 相当于函数封装了for..in
• ES6 后才开始支持
• 语法Object.assign(o,obj,obj1)
  • 第一个参数传目标对象
  • 后面参数是要拷贝属性的对象

var obj = {name:'zs'};
var obj1 = {age:20};

var o = {};

// 第一个参数:目标对象
//后面参数:要拷贝属性的对象
Object.assign(o,obj,obj1);

console.log(o);

原型式继承

特点:

• 1.不能获取实例属性和实例方法,只能获取父构造函数原型对象的属性和方法
• 2.无法修正构造器属性,默认指向父构造函数

设置子构造函数的原型对象是父构造函数的原型对象---->原型式继承

• 1.构造函数创建对象访问原型属性

function Person() {
    
}
// 利用构造函数创建出来的对象可以使用原型对象的属性和方法
Person.prototype.des = 'des';
var p1 = new Person();
console.log(p1.des);

• 2.替换原型
• 3.原型对象替换原型

//1.提供一个父构造函数
function Person() {
    this.name = '默认';
}
Person.prototype.des = 'aaa';
//2.提供一个子构造函数
function stu() {
    
}
// 设置子构造函数的原型对象是父构造函数的原型对象---->原型式继承
stu.prototype = Person.prototype;

var s1 = new Stu();
console.log(s1.des);

扩展内置对象

• 给所有内置的对象添加属性或方法
• Object Array Date Function String..

    // 需求 arr1有一个des属性和logDes方法
    var  arr1 = [1,2,3,4];
    arr1.des = 'des';
    arr1.logDes = function () {
        console.log(this.des);
    }
    
    console.loe(arr1.des);
    
    var arr2 = [5,6,7];
    arr2.des = 'des';
    arr2.logDes = function () {
        console.log(this.des);
    }
    
    // 需求  所有数组都添加一个des属性和logDes方法
    Array.prototype.des = 'des';
    Array.prototype.logDes = function() {
        console.log(this.des);
    }
    var arr3 = [3,4,5];
    var arr4 = [6,7,8];
    console.log(arr3.des);
    console.log(arr4.des);

    //通过这种方式确实可以扩展内置对象,但是不建议这样做
    // 因为在公司开发中,很可能是多人一起开发,而且项目的代码量可能非常多
    //如果人人都通过这种方式扩展内置对象,不方便项目日后的维护,很容易出现方法被覆盖的问题

安全的扩展内置对象

• 1.提供一个构造函数
• 2..设置这个构造函数的原型对象是内置构造函数的一个实例

function MyArray() {
    
}
MyArray.prototype = []//new Array();
MyArray.prototype.des = 'des';
MyArray.prototype.logDes = function (){
console.log(this.des);
}

var myarr1 = new MyArray();
myarr1.push('小明');
console.log(myarr1);
console.log(myarr1.des);

;

原型链(画图理解)

• 1.每一个对象都是由构造函数创建的
• 2.每一个构造函数都有对应的原型对象
• 3.原型对象也是一个对象,也是由构造函数创建出来的
• 4.这个构造函数也有自己的原型对象,这个原型对象也是有个对象,也是由构造函数创建出来的
• 以上就形成一个链式的结构,称为原型链
• 原型链的顶端是Object的原型对象
• (Object的原型对象也是由构造函数创建出来的,它的原型对象指向null)

原型链中属性的访问原则(就近原则)

• 通过对象.属性访问属性的时候,首先会查找自身,如果有就直接使用
• 如果没有,会查找原型对象,如果有就直接使用
• 如果原型对象也没有,会查找原型对象的原型对象,如果有就直接使用
• 如果还没有会继续向上查找,知道原型链的顶端(Object.prototype)
• 如果还没有,返回undefined(属性)或者报错(调用方法)

原型链继承

特点

• 1.对比原型式继承,他还可以继承父构造函数的实例属性,方法和原型对象
• 2.对比原型式继承,他可以修正构造器属性constructor

• 1.提供一个父构造函数和子构造函数
• 2.设置子构造函数的原型的对象好似父构造函数的一个实例 --->原型链继承

//1.提供一个父构造函数和子构造函数
function Person() {
    this.name = '默认';
}
Person.prototype.des = 'des';

function Stu() {
    
}
// 2.原型链继承
Stu.prototype = new Person();

var s1 = new Stu();
console.log(s1.des);//des
console.log(s1.name);//默认

原型链注意点

• 1.注意修正构造器要在原型链继承之后(涉及到替换对象的地址变更)
• 2.同理,要给当前对象的原型对象设置属性或方法,要在设置原型链继承之后
• 3.在原型链继承后,只能在原型链的基础上动态添加和修改属性和方法,如果用替换对象会破坏原型链继承

原型链继承的问题

• 1.无法传递参数给父构造函数
• 2.继承过来的实例属性会变为原型属性,就有数据共享的问题

Object.create()方法

• 创建一个新的对象,并设置这个对象的原型对象
• ES5 支持

    var obj = {name:'zs',age:20};
    
    //创建一个新的对象,并设置这个对象的原型对象
    var o = Object.create(obj);
    console.log(o.name);

• 兼容性处理

  var obj = {name:'zs',age:20};
  // 兼容性处理
  if(Object.create){
      var o = Object.create(obj);
  }else{
      // 非标准方法
      //var o = new Object();
      //o._protp_ = obj;
      
      // 标准方法  可封装
      function F() {
          
      }
      F.prototype = obj;
      var o = new F();
  }
  

• 兼容性函数封装

  function createObj(obj){
      if(Object.create){
          return Object.create(obj);
      }else{
          function F(){
          }
          F.prototype=obj;
          return new F()
      }
  }
  

• 方法二:处理兼容性 给Object添加方法(要放在使用方法前面)

  if(!Object.create){
      Object.create = function (obj){
          function F(){
          }
          F.prototype=obj;
          return new F() 
      }
  }
  

call和apply函数

• 1.在ES3的时候,系统给Function的原型队形添加了call和apply函数

• 2.作用:借用其他对象的方法

• call(调用对象,参数1,参数2(参数类表)

  • 语法: 借用对象.借用方法.call(调用对象,参数1,参数2(参数类表)

• apply(调用对象,参数数组)

  • 语法: 借用对象.借用方法.apply(调用对象,参数数组)

var zs = {
    name:'zs',
    showName : function (p1,p2){
        console.log(this.name,p1,p2)
    }
}

var ls = {
    name: 'ls'
}

zs.showNam('憨厚','耿直');
// 无法直接访问
//ls.showNam('智商高','情商低') // 报错

zs.showName.call(ls,'智商高','情商低')
zs.showName.apply(ls,['智商高','情商低'])

借用构造函数继承 | 经典继承 | 伪对象继承

• 只能获取实例属性和实例方法,不能获取原型属性和属性方法
• 本质是借用执行父构造函数的函数把this传入

    function Person(name,age){
        this.name = name;
        this.age = age;
    }
     Person.prototype.des= 'des';
    
    function stu(num,name,age){
        this.num = num;
        // 借用构造函数继承
        Person.call(this,name,age)
    }

    var s1 = new stu(10086,'zs',20);
    var s2 = new stu(1002,'ls',22);
    
    console.log(s1);
    console.log(s2);
    
    console.log(s1.des);
    console.log(s2.des);

组成继承

特点(利用借用构造函数继承)

• 1.解决了原型链参数传递给父构造函数的问题
• 2.解决了原型链继承所得的原型对象的数据共享问题

• 1.利用借用构造函数继承获取实例属性和方法
• 2.再获取原型属性和方法

    function Person(name){
        this.name = name;
    }
    Person.prototype.des= 'des';
    
    function stu(num,name){
        this.num = num;
        // 借用构造函数继承
        Person.call(this,name)
    }
    
    // 原型式继承
    Stu.prototype = Person.prototype
    
    // 原型链继承
    Stu.prototype = new Person()
    Stu.prototype.constructor = stu;
    
    var s1 = new stu(10086,'zs');
    
    console.log(s1.name);
    console.log(s1.des);

深拷贝和浅拷贝

• 浅拷贝(地址拷贝)(指针拷贝)
  • 引用类型的属性,把地址拷贝
• 深拷贝(内容拷贝, 完全拷贝)
  • 引用类型的属性,拷贝内容,过程要实现
  • 1.提供一个函数,有2个参数(目标对象,要拷贝属性的对象)
  • 2.判断第一个参数是否有值,如果没值,就初始化一个空点的对象
  • 3.遍历第二参数,判断属性值的类型
    • 1.值类型的,直接赋值
    • 2.引用类型的,再一次调用这个方法去拷贝存储的内容

  function deepCopy(obj,copyObj){
      obj = obj || {};
      
      for(var key in copyObj){
          if(typeof copyObj[key] == 'object'){
              obj[key] = {};
              //引用类型的数据
              deepCopy(obj[key],copyObj[key])
          }else{
              // 值类型
              obj[key]=copyObj[key]
          }
      }
  }
  

Array.isArray()

• 判断一个对象是否是数组

• ES5支持

• 在ES5之前是怎么判断一个对象是数组?
  Object.prototype.toString.call(判断对象)// [object,Array]

• 兼容性的处理

  if(!Array.isArray){
      Array.isArray = function (obj){
          return Object.prototype.toString.call(obj);
      }
  }