JS面向对象编程

面向对象

面向对象是以事物对象为中心，需要对象来完成事件；而面向过程是以事件为中心，将事件拆分成多个步骤来完成。面向对象具有封装、继承、多态的特性。封装是把过程和数据封装到一起，组成功能模块，方便调用；通过类继承，新的类可以继承现有的类；多态是指不同对象实现相同的方法，能够获取不同的结果。

var arr = []; 
arr = new Array();  //数组对象
var div = document.createElement("div");
var date0 = new Date(); //时间对象
var person = {
	name: "小明",  //属性
	age: 30,
	speak: function() { //方法
		alert("Hello");
	}
}
//访问对象的属性、调用方法
console.log(person.name)
console.log(person.speak)
//无序集合组成的js对象，遍历js对象
for(var attribute in person) { //attribute表示对象中的属性名称
    console.log(attribute) 
    console.log(person[attribute])
}

//数组实例
var arr = ['a', 'b', 'c', 'd', 'e'];
for(var index in arr) { //index对应元素下标
    console.log(index) 
    console.log(arr[index])
}

//对象工厂
function createPerson(name, age) {
    var p = {  
        name: name,
        age: age,
        getName: function() {
            return `${name}, ${age}`;
        }
    }
    return p;
}
//使用Object创建对象
function createPerson2(name, age) {
    var p = new Object(); 
    p.name = name;
    p.age = age;
    p.getName = function() { return `${name}, ${age}`; }
    return p;
}
//使用工厂创建对象
var p1 = createPerson("小华", 15)
console.log(p1.name, p1.age)
console.log(p1.getName())
var p2 = createPerson2("小华", 15)
console.log(p2.name, p2.age)
console.log(p2.getName())
console.log(p2 instanceof Object)

//构造函数，首字母大写
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() { return `${name}, ${age}`; }
}
//Person("小明", 15)没有new关键字，则构造器内部this指向window对象
//使用new关键字构造函数默认返回该类型的对象
var p = new Person("小明", 30)
console.log(p)
//this对象默认创建并且赋值，不需要返回，默认返回构造函数对象
console.log(p.getName)
console.log(p instanceof Person)
var arrObj = new Array(1, 2, 3)
console.log(arrObj instanceof Person) //false
//默认js所有对象都继承自Object
console.log(arrObj.toString())

//如果属性值是函数对象，会重复创建函数实例
function Person1(name, age) {
    this.name = name;
    this.age = age;
    this.getName = getName;
}
function getName() {
    return this.name;
}
var p2 = new Person1("小明", 15)
console.log(p2.name)
console.log(p2.getName)

//原型模式，实例对象会继承原型对象上的属性和方法
function Person() {
    this.name = "小明";
}
console.log(Person.prototype) 
console.log(Person.prototype.constructor) //原型对象的constructor属性又指向了构造函数
Person.prototype.name = "小华";
Person.prototype.age = 14;
Person.prototype.getName = function(){
    return this.name; //this:指调用对象
};
//每一个原型对象都有一个constructor，指向了对应的构造函数，如果构造函数变化，constructor会伴随着变化，每一个构造函数都会有一个原型对象，这个原型对象上的方法被所有new创建的对象拥有，原型对象下函数对象只被创建一次，就能被所有对象访问
var p = new Person()
console.log(p.name)
console.log(p.getName)
//判断属性或方法属于原型还是实例对象
console.log(p.hasOwnProperty("age")) //true
console.log(Person.prototype.hasOwnProperty("job")) //false
//判断原型是否属于某一个对象
console.log(Person.prototype.isPrototypeOf(p))

//继承
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype.getName = function(){
    return this.name;
};
//apply和call都是用来改变某个函数运行时上下文的，也就是改变函数内部this的指向
function Student(name, age, hobby) {
    this.hobby = hobby;
    Person.apply(this, arguments);
}
Student.prototype = Person.prototype;
Student.prototype.constructor = Student;
var stu = new Student("张三", 12, "打球")
console.log(stu.name, stu.age)
//使用父类原型方法
console.log(stu.getName())