class 面向对象与继承 call指向,封装和继承

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/82837637

面向对象为:通过类去创建对象

es5方式

//ES5方式
function Car (options){
    this.title = options.title;
}
// 针对car方法的扩展,也就是继承
Car.prototype.drive = function(){
    return 'Vroom';
}
//实例化,并具写入实参
const car = new Car({title:'BMW'});
//输出;
// console.log(car);//{ title: 'BMW' }
// console.log(car.drive());//Vroom

//继承
function Toyota(options){
    this.color = options.color;
}
const toyota = new Toyota({color:'red',title:'Focus'});
console.log(toyota)//{ color: 'red' }
//以上方法只能拿到color却拿不到title,如果想拿到TITLE我们可以在方法中加入call指向

 加入 call指向使用继承提取Toyota中的所有方法

//ES5方式
function Car (options){
    this.title = options.title;
}
// 针对car方法的扩展,也就是继承
Car.prototype.drive = function(){
    return 'Vroom';
}
//实例化,并具写入实参
// const car = new Car({title:'BMW'});
//输出;
// console.log(car);//{ title: 'BMW' }
// console.log(car.drive());//Vroom

//继承
function Toyota(options){
    Car.call(this,options)//this指的是当前的方法赋给上面Car的方法中,options指的是传入的实参
    this.color = options.color;
}
const toyota = new Toyota({color:'red',title:'Focus'});
// console.log(toyota)//{ color: 'red' }
console.log(toyota)//{title: "Focus", color: "red"}

1.  让toyota拥有Car里的drive的扩展(原型)方法

2. //ES5方式
   function Car (options){
       this.title = options.title;
   }
   // 针对car方法的扩展,也就是继承
   Car.prototype.drive = function(){
       return 'Vroom';
   }
   //实例化,并具写入实参
   // const car = new Car({title:'BMW'});
   //输出;
   // console.log(car);//{ title: 'BMW' }
   // console.log(car.drive());//Vroom
   
   //继承
   function Toyota(options){
       Car.call(this,options)//this指的是当前的方法赋给上面Car的方法中,options指的是传入的实参
       this.color = options.color;
   }
   //让toyota拥有Car中的drive扩展方法,如果想引用car中的原型就一定要有这两个方法;不然报错;
   Toyota.prototype = Object.create(Car.prototype);
   Toyota.prototype.constructor = Toyota;
   const toyota = new Toyota({color:'red',title:'Focus'});
   // console.log(toyota)//{ color: 'red' }
   //console.log(toyota)//{title: "Focus", color: "red"}
   console.log(toyota.drive())//Vroom
   //打印是否拥有drive这个方法

以上为ES5 类的方式较为复杂,下面可看看ES6类的方式;相对来说比较好些;

ES6 用class来创建 :

//ES6的类,花括号里可以直接使用对应的属性和方法
class Car{
    //构造函数的一个属性
    constructor({title}){//{}方法为ES6中的解构
        this.title = title;
    }
    //方法
    drive(){
        return 'vroom';
    }
}
//当类一旦实例化出来一个对象的时候,它第一个去到的就是方法里的constructor方法;所以constructor里需要接收一下
const car = new Car({title:'BMW'})
console.log(car)
//打印car中的drive方法
console.log(car.drive())//vroom

ES6的继承方法:

//ES6的类,花括号里可以直接使用对应的属性和方法
class Car{
    //构造函数的一个属性
    constructor({title}){//{}方法为ES6中的解构
        this.title = title;
    }
    //方法
    drive(){
        return 'vroom';
    }
}
//当类一旦实例化出来一个对象的时候,它第一个去到的就是方法里的constructor方法;所以constructor里需要接收一下
const car = new Car({title:'BMW'})
// console.log(car)
//打印car中的drive方法
// console.log(car.drive())//vroom

//继承
class Toyota extends Car{
    // 必须要的属性
    constructor(options){
        // 2.如果想打印color和title,就得加上一个方法super,但是调用的时候他一定要有一个父级,告诉他你继承于谁,可以在对象Toyota后面加上extends 然后继承于上面Car这个方法,保存后会发现打印出来了全部Toyota { title: 'Focus', color: 'red' }
        super(options);
        this.color = options.color;
    }
}
//实例化Toyota对象
const toyota = new Toyota({color:'red',title:'Focus'});
//1.打印当前的Toyota 发现只有{ color: 'red' }并没有title这个东西因为当前只是给coclor赋值,如果想要title我们不能像ES5一样再去改变指向,我们可以使用ES6提供的方法super
console.log(toyota)//