HTML5学习笔记（3）JavaScript面向对象程序设计

面向对象对象编程(OPP)复习：类class的三个基本特点-封装、继承、多态

（1）封装：将数据和操作捆绑在一起，定义一个新的class就是封装。

（2）继承：一个类共享了一个或多个其他类定义的属性和行为。

（3）多态：相同的函数名在不同子类中有不同的实现。

一、定义class

严格地说，JavaScript是基于对象的编程语言，而不是面向对象的编程语言。面向对象的编程语言（C++、JAVA等）声明一个类用class关键字，但是在JavaScript中，没有声明class的关键字，也没有办法对类的访问权限（public、protected、private）进行控制，而是使用函数来定义类。

Eg：( this 关键字是指当前对象）

function Person(name){
    this.name=name;
    this.sex='male';
    this.say='function(){
        document.write('my name is' + this.name);
    }
}

在JavaScript中，创建对象（即类的实例化）使用new关键字。

var XX = new Person('法外张三');
XX.say();

二、对象的属性和方法

（1）访问对象的属性和方法。JavaScript访问对象的方法只能用 . ，但是在访问对象属性的时候既可以用 . 也可以用 [ ]。实际项目开发中，一般使用 . 访问对象属性，但是在某些情况下会是 [ ]，例如遍历对象的属性，因为可以在把变量value 写到里面，[value]，在配合一个for循环。

（2）添加对象的属性和方法

// 定义class
function Person(name){
    this.name=name;
    this.sex='male';
    this.say='function(){
        document.write('my name is' + this.name);
    }
}

// 创建对象
var XX = new Person('法外张三');
XX.say();


// 动态添加属性
XX.tel = '147258369';
XX.run = function(){
    return'Yes' ;
}

//动态添加属性只在实例XX中，要想给class增加需要用到关键字prototype
Person.prototype.grade = '2020';
Person.prototype.run = function(){
    return 'YES' ;
}

三、继承

JavaScript常用的两种继承方式——原型继承和函数继承

（1）原型继承，缺点是创建子类实例时，无法向父类构造函数传递参数。

function Student(){
this.grade=5;
}

// 将Student定义为Person的子类
Student.prototype = new Person('Zhang')

var stu = new Student();
stu.say(); //调用Person中的say函数

（2）构造函数（call）实现继承，可以像父类构造函数传递参数，并实现继承父类。

function Student(name){
    Person.call(this,name);  //使用call，在子类中给父类传递参数
    this.grade = 5;
}

Student.prototype = new Person();
var stu = new Student('lisi');
stu.say();

另外，子类重新定义继承的方法，则与父类同名方法就行，例如

Student.prototype.say = function(){
    alert('change');
}

HTML5学习笔记（3）JavaScript面向对象程序设计

猜你喜欢