对象的基本概念
类:类型、模板、统称(人类、兽类)
对象:是类的一个实例,具体到某一个事物上(水里跳的鸟、地上爬的鱼)
继承:狗类继承至哺乳动物、猫类也会继承至哺乳动物,继承后子类可以使用父类的属性和方法
新旧语法:
- ES5面向对象语法:prototype
- ES6(2015)面向对象语法
ES5语法 prototype
构造函数:用于创建对象的函数
ES5: 原型对象:prototype
原型链:实现继承
ES5没有类的概念,通过构造函数实现;构造函数的函数名首字母大写;构造函数用来创建对象。
function Dog(name,age){
this.name = name;
this.age = age;
}
通过原型对象prototype赋予构造函数新的方法,这个方法可以被所有的添加的构造函数的实例使用。它是构造函数的属性。
// 通过原型对象为构造函数赋予新的方法 可以拓展自己写的 或者系统原生自带
Dog.prototype.Sayname = function(){ // prototype 接收方法在类、函数上
console.log(`我的名字是${this.name}`)
}
var dog = new Dog("旺财",2); // 创建了一个对象 狗类的实例
var twodog = new Dog("二哈",5)
dog.Sayname();
twodog.Sayname();
原型链实现继承即:子类的prototype等于父类,子类继承父类的属性。
function Animal(name){
this.name = name;
}
Animal.prototype.sayHellw = function(){
console.log("你好")
};
Animal.prototype.sayName = function(){
console.log(`你好,我是${this.name}`);
}
function Dog(name){
this.name;
}
Dog.prototype = new Animal(); // 继承动物类的方法
var dow = new Animal("大花");
dow.sayName();
dow.sayHellw();
ES6(2015)面向对象语法
ES6:
- class
- 继承
class定义类,class{},ES6里构造函数改为constructor(){},写在class内部,方法则卸载class内部,constructor外部。
// ES2015版本 class
class Dog{
constructor(name,age){
this.age = age;
this.name = name;
}
sayName(){
console.log(`我是${this.name}`)
}
}
let dog = new Dog("二傻",6);
dog.sayName();
继承 extends关键字 继承的语句写在class外部 例 class 子类 extends 父类{无额外添加元素空值即可 }
super关键字 多个元素情况下,使用super继承父级元素,再用this添加新的元素
// ES2015 继承
class Animal{
constructor(name){
this.name = name;
}
sayName(){
console.log(`我是${this.name}`)
}
}
class Dog extends Animal{
constructor(name,age){
super(name);
this.age = age;
}
}
let dog = new Dog("杰瑞",5)
dog.sayName();
console.log(dog.age)
小技巧
拓展Date对象实现dateFormate方法,返回值为“XXX年xx月xx日”
// 拓展Date对象实现dateFormate方法,返回值为“XXX年xx月xx日”
Date.prototype.dateFormate = function(){
let year = this.getFullYear();
let month = this.getMonth();
let date = this.getDate();
return `${year}年${month +1 }月${date}日`
}
let d = new Date();
let result = d.dateFormate();
console.log(result)
定义一个Person类,让Student和Teacher类继承Person,为Person类添加getlnformation方法,让Student和Teacher类都可以通过此方法获取个人信息。
class Person{
constructor(name){
this.name = name;
}
getlnformation(){
console.log(`你好,我的名字是${this.name}`);
}
}
class Student extends Person{}
class Teacher extends Person{}
let aab = new Student("张三");
aab.getlnformation();
let ccd = new Teacher("李四")
ccd.getlnformation();