8.prototype.md

Posted on | In

Prototypes

Objects are build by ‘constructor calls’(via: new)

A “constructor call” makes an object it is own prototype.

(cs101:
什么是类，对一个事物的抽像描述： 属性和方法.这个东西有啥属性， 能做什么。
类和实例的关系： 实例是类的实现。
类的一些特性： 继承和多态。
)

A “constructor call” makes an object linked to its own prototype.

注意区分link（保存引用）和完全复制的区别.js为了性能， 并没有进行完全复制。

所以， js中的class的继承并不是copy而是link， 链接万物。当然，你需要完全copy也不是不可以.

Prototypal class

1
2
3
4
5
6
7
function Workshop (teacher) {
    this.teacher = teacher;
}

Workshop.prototype.ask = (que) => {
    console.log(this.teacher, que);
}

Dunder Prototypes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Workshop (teacher) {
    this.teacher = teacher;
}

Workshop.prototype.ask = (que) => {
    console.log(this.teacher, que);
}

var deepJS = new Workshop('Kyle');

deepJS.constructor === Workshop

deepJS.__proto__ === Workshop.prototype;
Object.getPrototypeOf(deepJS) === Workshop.prototype;

Object.setPrototypeOf

正常的函数有prototype, 箭头函数没有.

shadowing prototype

原型链重写会导致很多问题， 导致指向异常。

prototypal inhertance

原型链继承并不是复制， 而是引用。

js中的继承其实更像行为委托（代理）.

class并不是唯一解，但是对于一些框架来说，class也许是他们的选择。原型模式对我们来说或许更加的适用。

OLOO Pattern (Object linked to other objects)

recall class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class workshop {
    constructor(teacher) {
        this.teacher = teacher;
    }

    ask(que) {
        console.log(this.teacher, que);
    }
}

class antherWorkshop extends workshop {
    speakUp(msg) {
        this.ask(msg);
    }
}

OLOO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const workshop = {
    setTeacher(teacher) {
        this.teacher = teacher;
    },
    ask(que) {
        console.log(this.teacher, que);
    }
}

const antherWorkshop = Object.assign(Object.create(workshop), {
    speakUp (msg) {
        this.ask(msg);
    }
})

const jsrecentParts = Object.create(antherWorkshop);
jsrecentParts.setTeacher('Kyle');
jsrecentParts.speakUp('What?');

ES5 polyfill: Object.create

1
2
3
4
5
6
7
if(!Object.create) {
    Object.create = function (o) {
        function F() {};
        F.prototype = o;
        return new F();
    }
}

delegation: design pattern

其实class只是实现相同结构的一条路。我们通过组合， 可以达到和class相同的效果，并且由于js的只引用不复制的一个语言特性下， 我们使用组合或许更加符合js的语言特性.

class的一个思想趋势是， 区分父子关系然后链接。而组合则是点对点的关系。那么组合的层级还有方式就很多。可以说组合让代码的粒度更细了。

还有个好处是，this的指向在组合的设计模式下会更加清晰。因为调用关系明确。判断this指向的四个规则第一条就是， 谁调用， 指向谁。