文章目录
面向对象
类:类型、模板、统称(鱼类,猫类)
对象:是类的一个实例,会具体到某一个事物上(天上飞的那只鸟)
继承:狗类继承哺乳动物类,猫类也是哺乳动物类。
多态,接口之后进行补充。
旧语法(ES5 prototype)与新语法(ES6)
ES5面向对象的知识
解释:
ES6是ECMAScript(ECMA International定义的商标脚本语言规范)的第六版。它于2015年推出。所以ES6又叫ES2015.
ES5是ECMAScript(由ECMA International定义的商标脚本语言规范)的第五版。 它于2009年推出。
1 构造函数:用于创建对象的函数,模拟类
代码实现
<script>
//es5是没有类的概念的,通过构造函数来实现类
//构造函数的函数名,首字母大写
//构造函数是用来创建对象用的。
function Dog(name,age){ //一类狗
this.name = name;
this.age = age;//this指的是指向的那个对象
}
var dog = new Dog("跳跳",5);
console.log(dog); //输出 {} at 面向对象.html:16
console.log("-----");
console.log("狗的名字"+dog.name);
</script>
2 原型对象 prototype
通过构造函数模拟的类,通过构造函数的一个属性(prototype)可以保证由构造函数创建的对象都可以使用(prototype)添加的函数以及方法,可以被所有类的实例进行使用。
自己创建的构造函数的prototype的扩展
利用prototype扩展我们自己定义的构造函数
Dog.prototype.sayName = function(){
console.log(`我的名字是${this.name}`);
}
var dog = new Dog("跳跳",5);
// console.log("狗的名字"+dog.name);
dog.sayName(); //控制台输出:我的名字时跳跳
var bigDog = new Dog("二哈",5);
bigDog.sayName(); //控制台输出:我的名字是二哈
利用prototype扩展系统自带的构造函数
//利用prototype扩展系统自带的构造函数,例如Array 这种方法比较常用
var arr = new Array(1,2,3);
// var arr=[1,2,3]; 两者的表示是一致的,因为都是数组对象
Array.prototype.sayLength = function(){
console.log(`我是一个数组,我的长度是${this.length}`);
}
arr.sayLength(); //一定是调用方法的形式,因为sayLength是function 所有一定要带括号。
//输出:我是一个数组,我的长度是3
3 原型链:实现继承(了解即可,ES2015之后有更好的继承方案)
//子类可以调用父类
function Animal(name){
this.name = name;
}
Animal.prototype.sayName = function(){
console.log(`你好,我的名字是${this.name }`);
}
function Dog(name){
this.name = name;
}
Dog.prototype = new Animal();//子类的扩展直接等于父类,从而继承父类的所有可继承的方法
var dog = new Dog("花花"); //定义一个子类的实例
dog.sayName(); //此时调用父类的方法
//控制台输出:你好,我的名字是花花
</script>
ES2015(ES6)面向对象语法
1 支持class关键字
//es6支持class 类的概念
class Dog{
//构造函数写里面
constructor(name,age){ //constructor顾名思义 构造,英语可以帮助理解以及助记
this.name = name;
this.age = age;
}
//对应方法也写里面
sayName(){
console.log(`我是${this.name}`);
}
}
//定义实例,并且调用类的方法
let dog = new Dog("花花",2); //输出:我是花花
dog.sayName();
继承(同java)
class Animal{
constructor(name){
this.name = name;
}
sayName(){
console.log(`我是${this.name}`)
}
}
继承 同Java的语法
class Dog extends Animal{
constructor(name,age){
super(name); //继承父类的,创建自己的构造函数
this.age = age; //自己添加的
}
sayAge(){
console.log(`狗的年龄${this.age}`)
}
}
定义类的实例
let dog = new Dog("花花",2); //此时可以使用自己的构造函数
dog.sayName(); //输出:我是花花
dog.sayAge(); //狗的年龄2
console.log("狗狗的年龄"+dog.age); //输出:狗狗的年龄2
当在子类中需要添加其他参数或者方法的时候,例如构造函数的重新塑造,就需要继承以及重写
总结
前端开发的过程中,大部分情况我们不需要去通过自定义类来完成任务,但是很多的时候我们会使用别人定义的类(例如第三方库或者框架)
作业:扩展Date的原型
Date.prototype.dateFormat = function(){
let year = this.getFullYear();
let month = this.getMonth();
let day = this.getDate();
return `${year}年${month+1}月${day}日`; //月份+1 是因为月份程序中的范围是0-11
}
let d =new Date("1997/12/7");//1997 12 7 1997.12.7 1997-12-7格式都是可以的,常用日期格式都是可以的,可以自己提取其中的数字信息
let result = d.dateFormat();
console.log(result);