版权声明:未经本人同意不得私自转载 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"}
-
让toyota拥有Car里的drive的扩展(原型)方法
-
//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)//