javascript面向对象编程---学习笔记

时间：2022-10-11 11:15:02

1.面向对象编程
javscript不区分类和实例的概念，而是通过原型(prototype)来实现面向对象编程。

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

var xiaoming = {
    name: '小明'
};

xiaoming.__proto__ = Student;

注意最后一行代码把xiaoming的原型指向了对象Student，看上去xiaoming仿佛是从Student继承下来的：

xiaoming.name; // '小明'
xiaoming.run(); // 小明 is running...

xiaoming有自己的name属性，但是并没有定义run()方法。不过由于小明是从student继承而来的，只要Student有run（）方法，xiaoming也可以调用。
javascript面向对象编程---学习笔记
所谓的继承关系不过是把一个对象的原型指向另一个对象而已。

创建原型继承：

/ 原型对象:
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
// 基于Student原型创建一个新对象:
var s = Object.create(Student);
// 初始化新对象:
    s.name = name;
return s;
}

var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true

2.创建对象
JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。
当使用obj.**访问一个对象的属性时，javascript先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。
例如：创建一个Array对象

var arr=[1,2,3];

其原型链是：

arr---->Array.prototype---->Object.prototype------>null

Array.prototype定义了indexof(),shift()等方法，因此你可以在所有的Array对象上直接调用这些方法。

function foo(){
return 0;
}

函数也是一个对象，它的原型链是：

foo----->Function.prototype----->Object.prototype----->null

由于Function.prototype定义了apply()等方法，因此，所有函数都可以调用apply()方法。

构造函数

除了直接用{ }创建一个对象外，javascript还可以用一种构造函数的方法来创建对象。它的用法是，先定义一个构造函数。

function Student(name){
this.name=name;
this.hello=function (){
  alert('hello'+this.name+'!');  
}
}

这是一个普通的函数，但是在javascript中，可以用关键字new来调用这个函数，并返回一个对象

var xiaoming=new Student('小明')；
xiaoming.name; //小明
xiaoming.hello();// hello 小明

注意：如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this。也就是说，不需要在最后写return this；
新创建的xiaoming的原型链是：

xiaoming--->Student.prototype--->Object.prototype---->null

用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：

xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true
Object.getPrototypeOf(xiaoming) === Student.prototype; // true
xiaoming instanceof Student; // true

javascript面向对象编程---学习笔记

红色箭头是原型链。注意，Student.prototype指向的对象就是xiaoming、xiaohong的原型对象，这个原型对象自己还有个属性constructor，指向Student函数本身。

函数Student恰好有个属性prototype指向xiaoming、xiaohong的原型对象，但是xiaoming、xiaohong这些对象可没有prototype这个属性，不过可以用__proto__这个非标准用法来查看。
xiaoming.hello; // function: Student.hello()
xiaohong.hello; // function: Student.hello()
xiaoming.hello === xiaohong.hello; // false

xiaoming和xiaohong各自的hello是一个函数，但它们是两个不同的函数，虽然函数名称和代码都是相同的！

如果通过new Student()创建了很多对象，这些对象的hello函数实际上只需要共享同一个函数就可以了，这样可以节省很多内存。要让对象共享一个hello函数，根据对象的属性查找原则，只要把hello函数移动到共同的原型上就可以了，也就是Student.prototype:

function Student(name) {
this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

注意：
如果一个函数被定义为创建对象的构造函数，但是调用时忘记了写new。
**在严格模式下，**this.name=name将报错，因为this绑定为undefined。
在非严格模式下，不报错，因为this绑定了window，于是创建了全局变量name，并且返回undefined，这个结果更糟糕。

构造函数的首字母应该大写，而普通函数的首字母小写。

3 原型继承

现在要基于Student扩展出PrimaryStudent，可以先定义出PrimaryStudent

function PrimaryStudent(props){
//调用Student构造函数，绑定this变量
Student.call(this,props);
this.grade=props.grade|| 1;
}

但是调用了Student构造函数不等于继承了Student，PrimaryStudent创建的对象原型是：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

必须想办法把原型链修改为：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

这样，原型链对了，继承关系就对了。新的基于PrimaryStudent创建的对象不但能调用PrimaryStudent.prototype定义的方法，也可以调用Student.prototype定义的方法。

这时，可以借助一个中间对象来实现正确的原型链，这个中间对象的原型要指向Student.prototype。中间对象可以用一个空函数F来实现。

// PrimaryStudent构造函数:
function PrimaryStudent(props) {
    Student.call(this, props);
this.grade = props.grade || 1;
}
// 空函数F:
function F() {
}

// 把F的原型指向Student.prototype:
F.prototype = Student.prototype;

// 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();

// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

// 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
};

// 创建xiaoming:
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2

// 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true

// 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

javascript面向对象编程---学习笔记

如果把继承这个动作用一个inherits()函数封装起来，还可以隐藏F的定义，并简化代码：

function inherits(Child, Parent) {
var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
function Student(props) {
this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

function PrimaryStudent(props) {
    Student.call(this, props);
this.grade = props.grade || 1;
}

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
};

javascript的原型继承实现方式就是：
1.定义新的构造函数，并在内部用call（）调用希望继承的构造函数，并绑定this
2.借助中间函数F实现原型链继承，最好通过封装的inherits函数完成
3.继续在新的构造函数的原型上定义新方法

4 class继承
新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。

class Student{
  constructor(name){
this.name=name;
 }
 hello(){
 alert('hello, '+this.name+'!');
 }
}

比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello().
创建一个Student对象代码和前面章节完全一样

var xiaoming=new Student('小明')；
xiaoming.hello();

通过class定义对象的更方便继承，直接通过extends来实现：

class PrimaryStudent extends Student {
    constructor(name, grade) {
super(name); // 记得用super调用父类的构造方法!
this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

注意PrimaryStudent的定义也是class关键字实现的，而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数。

PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。
标签：

相关文章