javascript --- 原型继承与属性拷贝的综合应用

对于继承来说,主要目标就是将一些现有的功能据为己有。也就是说,我们在新建一个对象的时候,通常首先继承现有对象,然后再为其添加额外的属性和方法。

对此,我们可以通过一个函数调用来完成。

具体而言就是:

  1. 使用原型继承的方式,将一个已有对象设置成新对象的原型。

  2. 新建一个对象后,将另一个已有对象的属性拷贝过来。

function objectPlus(o, stuff){
    var n;
    function F(){};
    F.prototype = o.prototype;
    n = new F();
    n.uber = o;

    for(var i in stuff){
        n[i] = stuff[i];
    }
    return n;
}

这个函数接收两个参数o, stuff; 对象o用于继承,对象stuff用来拷贝方法和属性。我们来看一下实际应用:

首先,需要一个基本对象shape:

var pepole = {
    name: ‘Anna‘,
    toString: function(){
        return this.name;
    }
}

接着,创建一个继承于shape的对象,并为其添加额外的属性与方法。这些属性与方法与一个文本标识法创建的匿名对象提供:

var her = objectPlus(pepole,{
    name: ‘Jock‘,
    toString:function(){
        return this.usber.toString() + ‘,‘ +this.name;
    }
})

接下来,我们继续来创建一个继承her对象的his对象,也为其添加一些属性和方法:

var his = ObjectPlus(her, {
    name: ‘lus‘,
    getArea: function(){
        return this.side * this.height / 2;
    },
    side: 0,
    height: 0
})

下面我们来测试一下:

var my = objectPublic(her, {
   side:4,
   height:4
})my.getArea(); // 8my.toString(); // Anna, Jock, Lus, Lus

这里的不同之处在于,执行toString()函数时,his的name属性会被执行两次,这是因为我们在实例化my的时候继承与her的,her自己又有name属性,所以这里又多了一层继承关系。

我们也可以给该实例一个新的name属性:

objectPuls(her, {
    side: 4,
    height: 4,
    name: ‘jiao‘
}).toString();
// Anna, Jock, Lus, jiao

对不住了,这两天有点懒,玩了个游戏,怀怀旧,来个A哥镇楼:╮(╯▽╰)╭╮(╯▽╰)╭╮(╯▽╰)╭

时间: 2024-11-09 07:35:40

javascript --- 原型继承与属性拷贝的综合应用的相关文章

原型继承与属性拷贝的混合应用

对于继承应用来说,主要目标就是将一些现有的功能归为己有.也就是说,我们在新建一个对象时,通常首先应该继承与现有对象,然后再为其添加额外的方法和属性.具体而言就是: 使用原型继承的方式克隆现存对象. 而对于其他对象使用属性拷贝的方式 function objectPlus(o,stuff){ var n; function F(){} F.prototype=o; n = new F(); n.uber=o; for (var i in stuff){ n[i] = stuff[i]; } ret

JavaScript原型继承的陷阱

JavaScript原型继承的陷阱 JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱. 先看第一个例子 var creat

[JavaScript原型继承理解一]

转:http://www.cnblogs.com/harolei/p/3740354.html 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sponsor的一对一辅导和自己回来后反复思考,总算觉得把其中的精妙领悟一二了. 1. JavaScript创建对象 在面向对象语言中,通常通过定义类然后再进行实例化来创建多个具有相同属性和方法的对象.但是在JavaScript中并没有类的概念

彻底理解Javascript原型继承

彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员与原型成员 举一个<高性能Javascript>书中例子 var book={ title :"High Performance JavaScript", publisher:"Yahoo!Press" }; alert(book.toString());/

【转载】Javascript原型继承-学习笔记

阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 笔记如下: 一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(p

JavaScript 原型继承开端

1.原型继承本质       就javascript对象系统的实现来讲,对象并没有原型,而构造器有原型(构造器.prototype指向其原型).对象只有构造自某个原型的说法,并没有持有某个原型的说法.原型其实也是一个对象实例.原型的含义是指:如果构造器有一个原型对象A,则由该构造器创建的实例都必然复制自A. 2.空的对象是所有对象的基础 来看看以下代码: 1 <html> 2 <head> 3 <meta http-equiv="content-type"

Javascript原型继承原理

对于面向对象的基础语法在此我就不重复了,对面向对象不熟悉的朋友可以参看<使用面向对象的技术创建高级 Web 应用程序>一文. prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //Animal构造函数 function Animal(name){     this.name = name; } //Animal原型对象 Animal.prototype = {     id

Javascript原型继承容易忽略的错误

编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象语言的特性是继承,封装,多态,抽象,而本文讨论的是Javascript的继承,Javascript的继承方式有原型继承,组合继承,寄生继承等等,在日常开发中,哪种继承方式更好用在于开发者对于程序的结果以及性能的考虑.笔者在下面列举出原型继承中经常容易被忽略的错误. 常见错误一: function F

javascript原型继承圣杯模式

javascript纯面向对象开发需要使用到的一个模式,来对对象之间原型继承做中间层代理避免重复继承与代码杂乱 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"