读书笔记-1【javascript语言精粹】继承

2019-06-14 admin

构造器调用模式

当一个函数对象被创建时,Function构造器会运行类似这样的代码:

this.prototype = {constructor: this}

new一个函数事会发生:

Function.method('new', function() {
    // 创建新对象,继承原型
    let that = Object.create(this.prototype);
    // 调用构造函数,绑定this到新对象
    let res = this.apply(that, arguments);
    return typeof res === 'object' && res || that;
}); 

伪类继承

let Mammal = function(name) {
    this.name = name;
}
Mammal.prototype.get_name = function() {
    return this.name;
}

// 构造一个实例
let myMammal = new Mammal('zhangsan');
// 利用伪类继承Mammal
let Cat = function(name) {
    this.name = name;
    this.age = age;
}

Cat.prototype = new Mammal();
Cat.prototype.get_age = function() {
    return this.age;
}

let myCat = new Cat('miao');

以上就是一个简单的伪类继承。使用构造器有个严重的危害,如果在调用构造器函数的时候忘记使用new前缀,this不仅不会绑定到新对象,还会污染全局变量;

原型模式

原型模式中,我们采用对象来继承。

let myMammal = {
    name: 'aa',
    age: 22,
    get_name: function() {
        return this.name;
    }
}

let myCat = Object.create(myMammal);
Cat.get_age = function() {
    return this.age;
}

这种继承方式,导致没有私有属性和私有函数

函数化模式

它的每一层都是在扩充that

Function.prototype.method = function (name,func) {
    this.prototype[name] = func;
    return this; 
}
// 工厂mammal函数
var mammal = function (spec) {
    var that = {};

    that.get_name = function () {
        return spec.name;
    }
    that.says = function (spec) {
        return spec.saying || '';
    } 

    return that;
}

// 工厂cat函数(基于mammal的函数)
var cat = function (spec) {
    spec.saying = spec.saying || 'meow';
    // 直接调用mammal函数
    var that = mammal(spec);
    that.purr = function (n) {
        var i, s = '';
        for (i = 0; i < n; i += 1) {
            if(s) {
                s += '-';
            }
            s += 'r';
        }
    }
    that.get_name = function () {
        return that.says() + ' ' + spec.name + ' ' + that.says();
    }
    return that;
}

// 创建myCat对象
var myCat = cat({name: 'Henrietta'});

Object.method('superior',function (name) {
    var that = this,
        method = that[name];
    return function () {
        return method.apply(that, arguments)
    }
})

// 工厂coolcat函数(基于cat函数)
var coolcat = function (spec) {
    var that = cat(spec),
        super_get_name = that.superior('get_name');
    that.get_name = function (n) {
        return 'like ' + super_get_name() + ' baby';
    }
    return that;
}

var myCoolCat = coolcat({name : 'Bix'});

var name = myCoolCat.get_name();

部件

没看懂。。

let eventuality = function(that) {
    let registry = {};
    that.fire = function(event) {
        let array, 
            func,
            handler,
            i,
            type = typeof event === 'string' ? event : event.type;
        if (registry.hasOwnProperty(type)) {
            array = registry[type];
            for(i = 0; i < array.length; i++) {
                handler = array[i];
                func = handler.method;
                if (typeof func === 'string') {
                    func = this[func];
                }
                func.apply(this, handler.parameters || [events]);
            }
        }
        return this;

    }
    that.on = function(type, method, parameters) {
        let handler= {
            method,
            parameters
        };
        if (registry.hasOwnProperty(type)) {
            registry[type].push(handler);
        } else {
            registry[type] = [handler];
        }
        return this;
    }
    return that;
}

[转载]原文链接:https://segmentfault.com/a/1190000019475838

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67250.html

文章标题:读书笔记-1【javascript语言精粹】继承

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
回到顶部