关于JavaScript中实现继承,及prototype属性

感谢Mozilla 让我弄懂继承。

JavaScript有八种基本类型,函数属于object。所以所有函数都继承自object。//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且都可以被储存在变量里。将这个记在脑子里。

但是JavaScript并没有真正意义上的继承。而是类似于指向和复制。并且每个函数和对象都有prototype属性。("原型链"(prototype chain)模式)

所有就构造了如同树结构一般的原型链。

常见的几种继承方法:

1.

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}
function ClassB(sColor, sName) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();    //输出 "blue"
objB.sayColor();    //输出 "red"
objB.sayName();//输出 "John"

以上代码,主要的在标红部分,先解释ClassB函数体中标红第一句:

this.newMethod = ClassA;this是指的当前对象的拥有者。代码,this.newMethod = ClassA在ClassB的函数体中。假如我var v=new ClassB();//ClassB函数体中的this就指代的v,因为v是ClassB函数体的拥有者。//以上代码,具体经历了哪些步骤,我们先分析一下:this肯定是指的ClassB。所以this.newMethod 可以就解释为ClassB新建一个newMethod属性并且赋值ClassA。//this.XXX快速建立一个属性,或者修改属性值

接着解释ClassB标红第二句:
this.newMethod(sColor);关键在这第二句,代码上的this毋庸置疑肯定是指的ClassB。具体执行表示:执行newMethod函数。//就是执行ClassA//步骤解释newMethod既然赋值为ClassA,那newMethod就有ClassA所有属性和方法
function newMethod(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

之前说过,this当前对象拥有者,newMethod是ClassB的属性,所有newMethod函数体中的this指代的是ClassB

执行函数体中的代码就是,ClassB.color=Scolor;ClassB.sayColor=function...;//动态添加属性

ClassB中的第三句:

 delete this.newMethod;//删除属性既然我ClassB已经拥有了ClassA中的方法和属性了,newMethod对ClassB已经没有用了。

2.

function ClassA() {
    this.color = "red";
    this.sayColor = function () {
        console.log(this.color);
    };
}
ClassA.prototype.height=100;
function ClassB() {
    this.color="bule";
}
ClassB.prototype=new ClassA();
ClassB.prototype.width=200;
var b =new ClassB();
b.sayColor();//bule

如下例:

 var BaseCalculator = function() {
        this.t=2;
    };//这是一个构造函数

    BaseCalculator.prototype = {
        add: function(x, y) {
            return x + y;
        },
        subtract: function(x, y) {
            return x - y;
        }
    };
    var Calculator = function () {
        //为每个实例都声明一个数字
       this.tax = 5;
    };

    Calculator.prototype = new BaseCalculator();//继承
   //Calculator.prototype.constructor=Calculator;
   Calculator.prototype.add = function (x, y) {
        return x + y + this.tax;
    };

(样式图 根据上代码画图)

如样式图--详细解释

时间: 2024-07-29 16:47:23

关于JavaScript中实现继承,及prototype属性的相关文章

Javascript中的继承与Prototype

之前学习js仅仅是把w3school上的基本语法看了一次而已,再后来细看书的时候,书中会出现很多很多没有听过的语法,其中一个就是js的继承以及总能看到的prototype.我主要在看的两本js书是<javascript权威指南>,也就是那本犀牛书,还有一本是疯狂xx系列的<疯HTML5/CSS3/Javascript讲义>.前者非常适合用啃js细节,如果需要深入学习一些js内部机制以及相关的内容,这本大块头啃起来还是挺有味道的.后者是本速成教材,可以让你对某个概念有一个非常舒服的打

JavaScript学习13 JavaScript中的继承

JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式:对象冒充 function Parent(username) //父类对象 { this.username = username; //下面的代码最关键的部分就是将子对象的this传递给了父对象 this.sayHello = function() { alert(this.username); } } f

JavaScript中的继承(原型链)

一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.property = true; } SupType.prototype.getSupvalue = function() { return this.property; }; function SubType() { this.subproperty = false; } //原型对象等于一个类型的实例

javascript 中各种继承方式的优缺点 (转)

javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name) { this.name = name; this.setName = (newName) => { this.name = name; }; this.getName = () => { return this.name; } } let Sub = function(sex) { this.se

JavaScript中的继承机制

JavaScript到底是不是面向对象的?! 有人说是,有人说基于对象更准确,因为JavaScript没有类.不去管它,但JavaScript确实提供了一些面向对象的机制. 本文主要讨论JavaScript中的继承.继承,简单来说,就是让子类获得父类的属性和方法,以达到共享和复用的目的. 在开始继承之前,首先需要创建父类.为了后续讨论的需要,我分别为父类创建了私有对象.实例对象.引用对象和两个实例方法. 创建父类的代码如下: // 父类实例的构造函数 function Pet(name,soun

JavaScript中四种不同的属性检测方式比较

JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //false "toString" in o; //true,继承属性可以被检测到 "toString" in Object.prototype; //true,不可枚举的属性可以被检测到 2. hasOwnProperty()方法 var o = {x:1}; o.hasO

javascript 中实现继承的六种方式

javascript 中对于继承的描述: 许多面向对象语言都支持两种继承的方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.在 javascript 中由于函数没有签名也就无法实现接口继承,而只支持实现继承,而且实现继承主要通过原型链来实现的. 先引述下官方文档对于原型链的描述:其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.要理解这个概念要先弄清楚构造函数,原型,和实例的关系:每个构造函数(只要是函数)都有一个 prototype 属性该属性指向一

javascript中实现继承的几种方式

javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Child1(){ Parent1.call(this); this.type = "child1"; } 缺点:Child1无法继承Parent1的原型对象,并没有真正的实现继承(部分继承) 2.借用原型链实现继承 function Parent2(){ this.name = "p

用实例谈谈javascript中的this和prototype

本文通过几个实例谈谈js中一些基础概念的问题.首先回顾一下js这门语言的特点:除了对象什么都没有.函数在js语言中被看作一种特殊的数据类型,特殊在包含代码并且可以执行,但落点在它是一种数据类型,与数字.字符串等一样.    理解了这个,那么js语言中的全局作用域和函数作用域.全局变量和局部变量.可以通过全局对象和非全局对象划分.如果函数或其他数据类型,不依托非全局变量,那么就默认依托全局变量,即作为全局对象的属性或方法,否则被当作局部对象方法或属性.this被用作指向属性和方法所依托的对象.搞清

JavaScript的数据类型都有什么? JavaScript中 toStirng() 与 Object.prototype.toString().call()

JavaScript的数据类型都有什么? (via  BAT互联网公司2014前端笔试面试题:JavaScript篇  http://www.sxt.cn/u/756/blog/4508) 基本数据类型:String,boolean,Number,Undefined, Null 引用数据类型: Object(Array,Date,RegExp,Function) 疑问:这些基本的数据类型的值都是常量,而常量是没有方法的,为什么能够调用方法呢?答案是这样的,五种基本类型除了null.undefin