week 17

2019年8月26日 209次阅读 来源: SmartJuneThx

面向对象编程

传统的基于class的面向对象言语如Java中，都有两个基本观点：

  • 类：类是对象的实例模版，自身是一种范例。如：
  • 实例：实例是依据类建立的对象。Student xiaoming = new Student()

而JS不辨别类和实例的观点，它经由历程原型（prototype）完成面向对象。JS建立对象是用原型，完成继续也是用原型。

建立对象：

var Student = {name: 'abc', height: 1.7}; 
var xiaoming = {name: 'xiaoming'};
xiaoming._proto_ = Student;

《week 17》

建立对象

JS对每一个建立的对象都邑设置一个原型，指向它的原型对象。
当运用obj.***接见一个对象的属性时，JS如今当前对象上查找该属性；假如没找到，就到其原型对象上找；假如还没找到，就一向上溯到Object.prototype这个原型对象；末了，假如还没找到，就返回undefined。这个历程能够示意为一个原型链。

// 组织函数对象
function Student(name) {
    this.name = name;  //这里设置了每一个对象的属性
}
// 原型对象
Student.prototype.hello = function() {
    alert('Hello, ' + this.name);  //这里设置了一切对象同享的hello函数，经由历程继续取得
}
// 实例对象
var xiaoming = new Student('小明');
var xiaohong = new Student('小红');

原型链以下（图中赤色箭头是原型链）：

xiaoming \
xiaohong — Student.prototype —-> Object.prototype —-> null

《week 17》

补充：
见犀牛书

原型继续

Java中，继续的实质是：扩大一个已有的Class，天生一个新的Subclass。由于Java严厉辨别类和实例，继续实际上是范例的扩大。

而JS没法直接扩大一个Class，由于不存在Class这类范例，JS采纳的是原型继续。

斟酌基于Student扩大出PrimaryStudent，原型链必需修正成如许：

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

完成要领：

// PrimaryStudent的组织函数
function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 引入中心对象：空函数F
function F() {}
F.prototype = Student.prototype;

// 修正两个属性，以完成上述原型链
PrimaryStudent.prototype = new F();
PrimaryStudent.prototype.constructor = PrimaryStudent;

// 在PrimaryStudent的原型对象上定义要领
PrimaryStudent.prototype.getGrade = function() {
    return this.grade;
}

// 建立子类对象
var xiaoming = new PrimaryStudent({name: '小明', grade: 60});

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

原型链图示：

《week 17》

    原文作者：SmartJuneThx
    原文地址: https://segmentfault.com/a/1190000002990086
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞