`

Javascript学习笔记 What is "extend"

阅读更多
1. 从关于“new”的一段代码开始

从《JavaScript语言精粹》上看到一个关于“new”实现方法的猜测,实现正规,而且符合实际情况。下面把代码列下来。

Function.method('new', function(){
    // 创建一个新对象,它继承自构造器函数的原型对象。
    var that = Object.create(this.prototype);

    // 调用构造器函数,绑定 -this- 到新对象上。
    var other = this.apply(that, arguments);

    // 如果它的返回值不是一个对象,就返回该新对象。
    return (typeof other === 'object' && other) || other;
});


2. 关于继承的实现

假设上面写的正确,我们可以结合面向对象中继承的定义来实现JavaScript中的继承,即继承性是子类自动共享父类数据结构和方法的机制。

假设一个父类如下实现。
var Parent = function(x) {
    this.x = x + 1;
};
Parent.prototype.getX = function() {
    return this.x;
};


假设希望实现一个子类为Child。

子类则需要继承父类的属性和方法,根据原型链可以使用如下方法。
var Child = function() {
    //此构造函数的实现下面会讨论
};
Child.prototype = new Parent();

依据上面new的实现,Child.prototype将会被挂载到Parent类(var Parent = function(){})原型链的下面。
那么所有Parent.prototype下所有的属性都会被Child.prototype使用(var that = Object.create(this.prototype);)。
那么就会有当有如两个实现的对象。
var p = new Parent();
var c = new Child();

则,所有p的函数都会被c使用,这个情况符合继承的定义。

但是这种实现的问题是Parent的构造函数无法被继承,那么可以用如下代码实现。
var Child = function(x, y){
    //$1:下面三行实现如Java中的this.parent()方法
    this.method = Parent;
    this.method(x);
    delete this.method;

    //Child自己的构造方法中的内容。
    this.y = y;
};

总体思路是通过改变Parent中this(即函数运行环境)来实现类似于其他语言中this.parent的方法。因为就构造函数而言,父类对于子类的影响体现为构造函数所改变this下的属性和方法。
因此$1的实现方式还可以替换为以下两种方法。
Parent.call(this, x);
//或
Parent.apply(this, new Array(x));


总结以上,Child的实现如下。
var Child = function(x, y) {
    Parent.call(this, x);

    this.y = y;
};
Child.prototype = new Parent();
Child.prototype.getY = function() {
    return this.y;
}


3. Child和Parent的原型链

可以得到如下的原型链。

4. instanceof与typeof
console.log(Child.prototype.constructor === Parent); //true
console.log(typeof Parent == "function"); //true
console.log(typeof Child == "function"); //true
  • 大小: 29.6 KB
分享到:
评论

相关推荐

    Test-Driven JavaScript Development

    What This Book is About This book is about programming JavaScript for the real world, using the techniques and workflow suggested by Test-Driven Development. It is about gaining confidence in your ...

    com.guo.android_extend android-extend1.0.6.zip

    implementation 'com.guo.android_extend:android-extend:1.0.6'失败,用这个替代就好了 implementation 'com.guo.android_extend:android-extend:1.0.6'失败,用这个替代就好了

    com.guo.android_extend:android-extend:1.0.6

    implementation 'com.guo.android_extend:android-extend:1.0.6'失败,用这个替代就好了

    Modular Programming with JavaScript(PACKT,2016)

    Programming in the modular manner is always encouraged for ...Become familiar with AMD and CommonJS utilities and discover what the future of JavaScript holds for modular programming and architecture

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    给jQuery添加扩展时用$.extend()如:jQuery.extend({add:function(a,b){return a+b}}) 使用:$.add(1,3)=====>4; 给jQuery实例对象添加扩展时用$.fn.extend(); $.fn.extend({gys:function(){$(this).css(“color”,”...

    计算graphicLayers的extend

    计算graphicLayers的extend

    Javascript Object.extend

    既然是类,那么就有抽象... Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } return destination; } Object.prototype.extend = function(o

    原生js实现jquery $.extend方法

    原生js实现jquery $.extend方法 通过遍历对象属性来实现

    jQuery.extend 函数详解

    jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。

    PL/SQL学习笔记

    什么是集合? 集合是用来存放大量数据的一种容器 PL/SQL有三种集合 联合数组 ...学习状态:学一个东西,有欲望,写东西出来 三段式:被动,自发,自动 java-web 自己写一个,从四月开始到中旬任务

    jquery.validate.extend.js

    jquery.validate.extend.js

    practical internet of things with javascript

    Some knowledge about electronics and familiarity with programming concepts (JavaScript - ES5/ES6) is expected. Table of Contents Chapter 1. The World of IoT Chapter 2. IoTFW.js - I Chapter 3. IoTFW....

    JavaScript Domain-Driven Design(PACKT,2015)

    It is time to adapt modern software development practices from JavaScript to model complex business needs. JavaScript Domain-Driven Design allows you to leverage your JavaScript skills to create ...

    EXTEND基础

    EXTEND工程设计软件的基础教程 英文版本 适合初学者

    【1积分】android-extend-1.0.6.aar

    使用方式:把资源放到libs下,在gradle app 中添加 低版本:compile files('libs/android-extend-1.0.6.aar') 高版本:implementation files('libs/android-extend-1.0.6.aar')

    Programming JavaScript Applications

    as well as the final ebook version., Take your existing JavaScript skills to the next level and learn how to build complete web scale or enterprise applications that are easy to extend and maintain....

    Extend

    NULL 博文链接:https://anniexuguoan.iteye.com/blog/835266

    解析UML用例图中include与extend的区别

    解析UML用例图中include与extend的区别

    foam-extend-4.1第三方库

    foam-extend-4.1的地方库,安装时将库放在指定文件夹,不需要下载,可以直接安装编译。 库文件来自于互联网,用于学习使用。

Global site tag (gtag.js) - Google Analytics