`

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
分享到:
评论

相关推荐

    我的JavaScript学习笔记

    这篇学习笔记将带你深入了解JavaScript的基础和一些进阶应用。 首先,我们从"Js基本语法"开始。JavaScript是一种弱类型、解释型的脚本语言,它支持变量声明(var、let、const)、数据类型(包括基本类型:字符串、...

    ext api,ext 学习笔记,SWFUpload_多文件上传及部分工具

    在EXT学习笔记中,"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念,这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...

    jQuery.extend 函数详解

    ### jQuery.extend 函数详解 #### 一、概述 在JavaScript前端开发中,jQuery是一个非常流行的库,它简化了许多常见的操作,比如DOM操作、事件处理、AJAX交互等。`jQuery.extend`是jQuery提供的一个用于扩展jQuery...

    underscore.extend与$.extend实例比较分析

    在JavaScript开发中,`underscore` 和 `jQuery` 都提供了扩展对象的功能,即 `_.extend()` 和 `$.extend()` 方法。这两个方法允许开发者合并一个或多个对象的属性到目标对象中,实现对象间的属性拷贝。本文将深入...

    jquery $.fn.extend

    `$.fn.extend`是jQuery库中的一个核心方法,主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数,从而实现对DOM元素的操作或添加新的功能。在jQuery中,`$.fn`实际上是`$.prototype`的一个...

    Extend

    许多JavaScript工具库,如jQuery、Lodash、Underscore等,也提供了`extend`或`assign`方法来扩展对象。这些库通常会处理一些边界情况,比如深拷贝、循环引用等问题,使得对象扩展更加安全和可靠。 - **jQuery....

    vue2+vue3学习笔记

    Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中,`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用,而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...

    Javascript Object.extend

    JavaScript中的`Object.extend`是一个用于实现对象继承的关键技术。它允许你将一个对象的属性和方法扩展或复制到另一个对象中。在这个过程中,我们可以探讨几个关键概念:对象、类、原型(prototype)、实例成员和...

    python学习笔记

    在Python学习笔记中,我们主要探讨以下几个核心知识点: 1. **数据类型与数据结构** Python支持多种数据类型,包括基本的整型、浮点型、字符串等。其中,数据结构是Python的一大特色,特别是容器类型。容器可以...

    jQuery.extend

    除了可以扩展普通JavaScript对象,jQuery.extend也可以用来扩展jQuery对象本身,增加新的方法或属性: ```javascript $.extend({ myMethod: function() { console.log("This is a custom method."); } }); $("#...

    vue快速学习笔记

    ### Vue.js 快速学习笔记:组件系统详解 #### 组件概述 组件是Vue.js框架中的核心特性之一,它能够帮助开发者将复杂的应用程序分解成更小、更易管理的部分。通过组件化的设计思路,我们可以将不同的功能模块封装进...

    圣思源的jquery学习笔记

    《圣思源jQuery学习笔记详解》 jQuery,作为一款强大的JavaScript库,自2006年发布以来,因其简洁易用的API和丰富的插件生态,迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记,深入浅出地剖析了...

    com.guo.android_extend:android-extend:1.0.6

    标题 "com.guo.android_extend:android-extend:1.0.6" 提示我们这是一个 Android 库项目,属于开发者郭某的扩展库,版本号为 1.0.6。通常,这种格式表示的是 Maven 或 Gradle 的依赖坐标,用于在构建 Android 项目时...

    cesium-extend_Extend_cesium拓展entity_cesium_

    Cesium是一个强大的开源JavaScript库,用于在Web上创建交互式的3D地球模型。"cesium-extend"项目是针对Cesium的功能扩展包,旨在增强其原生能力,提供更多的实用功能,如白模(Wireframe)展示和避让(Occlusion)...

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    这篇JavaScript学习笔记主要介绍了如何使用类似jQuery的封装方式来实现图片的等比缩放和预加载功能。在实际网页开发中,图片的显示效果和加载速度对于用户体验至关重要,因此掌握这两种技术是十分必要的。 首先,...

Global site tag (gtag.js) - Google Analytics