高级javascript---原型和原型继承

在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性。 函数的原型为对象。 它主要在函数用作构造函数时使用。

function Vehicle(wheels, engine) {
    this.wheels = wheels;
    this.engine = engine;
}

在上面的示例中,Vehicle 函数的原型是使用 Vehicle 构造函数实例化的任何对象的原型。

使用原型添加属性和方法

可以使用 prototype 属性向对象添加属性和方法,甚至于已创建的对象也是如此:

var testVehicle = new Vehicle(2, false);
Vehicle.prototype.color = "red";
var testColor = testVehicle.color;

  

testColor 的值为“red”。

你甚至可以向预定义的对象添加属性和方法。 例如,你可以在 String 原型对象上定义一个 Trim 方法,脚本中的所有字符串都将继承该方法。

String.prototype.trim = function()
{
    // Replace leading and trailing spaces with the empty string
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
var s = "    leading and trailing spaces    ";
// Displays "    leading and trailing spaces     (35)"
window.alert(s + " (" + s.length + ")");
// Remove the leading and trailing spaces
s = s.trim();
// Displays "leading and trailing spaces (27)"
window.alert(s + " (" + s.length + ")");

使用原型通过 Object.create 从一个对象派生另一个对象

prototype 对象可用于从一个对象派生另一个对象。 例如,你可以使用 Object.create 函数派生使用我们之前定义的 Vehicle 对象的原型(以及所需的任何新属性)的新对象Bicycle。

var Bicycle = Object.create(Object.getPrototypeOf(Vehicle), {
    "pedals" :{value: true}
});

Bicycle 对象具有属性 wheels、engine、color 和 pedals,并且其原型为 Vehicle.prototype。 JavaScript 引擎会查找 Bicycle 的 pedals 属性,并查看原型链以便查找Vehicle 的 wheels、engine 和 color。

更改对象的原型

在 Internet Explorer 11 中,可以通过 __proto 属性用新原型替换对象或函数的内部原型。 使用此属性时,将继承新原型的属性和方法以及其原型链中的其他属性和方法。

以下示例演示如何更改对象的原型。 此示例演示当更改对象原型时,对象的继承属性将如何更改。

function Friend() {
    this.demeanor = "happy";
}

function Foe() {
    this.demeanor = "suspicious";
}

var friend = new Friend();
var foe = new Foe();

var player = new Object();
player.__proto__ = foe;

friend.ally = "Tom";

if (console && console.log) {
    console.log(player.demeanor === "happy" );      // Returns false
    console.log(player.demeanor === "suspicious");  // Returns true
    console.log(player.ally === "Tom");             // Returns false
    // Turn the foe to a friend.
    player.__proto__ = friend;
    console.log(player.demeanor === "happy");       // Returns true
    console.log(player.demeanor === "suspicious");  // Returns false
    console.log(player.ally === "Tom");             // Returns true
}

上面是摘自http://msdn.microsoft.com/zh-cn/library/hh924508(v=vs.94).aspx上的原文。

下面是我从慕客网上看到的一个问题,仔细分析之后感觉挺有意思,于是记下录来。

仔细分析 Man.prototype = new People 与 Man.prototype = People.prototype 这两种继承的区别

function People (){
        this.name = ‘frog‘;
        this.age = 29;
    }

    People.prototype.getName = function(){
        return this.name;
    }

    function Man(){
       this.name = ‘rat‘;
       this.age = 3;
    }

    Man.prototype = new People;

    //某一天,新来的小伙伴修改了这个方法
    Man.prototype.getName = function(){
        return this.age;
    }

    var p = new People;
    var n = p.getName();
    console.log(n); // 输出29而不是 frog
    //说明直接用原开链,父类会被子类影响
 类似的问题还有为什么要使用中间对象 
f = function(){};
f.prototype = People.prototype;
Man.prototyep = new f();
为什么要引入一个f对象的实例?简单说,就是为了断开与People原型链的引用,并且只继承People原型上的方法,而不继承它的属性。
时间: 2024-10-15 23:28:18

高级javascript---原型和原型继承的相关文章

浅谈Javascript中的原型、原型链、继承

构造函数,原型,实例三者的关系 构造函数: 构造函数是创建对象的一种常用方式, 其他创建对象的方式还包括工厂模式, 原型模式, 对象字面量等.我们来看一个简单的构造函数: function Product (name, role){ //构造函数的命名约定第一个字母使用大写的形式! this.name = name; this.role = role; } ( 1 ) 每一个构造函数都有一个prototype属性,我们可以在Chorme控制台中打印出Product.prototype属性. (

菜鸟快飞之JavaScript对象、原型、继承(三)

正文之前需要声明的一点是,菜鸟系列博文全是基于ES5的,不考虑ES6甚至更高版本. 继承 由于我个人不是学计算机的,所以对于很多东西只是知其然,不知其所以然.就像这个继承,刚开始学JavaScript就听人说了JavaScript几大核心,但是自己平时似乎都没怎么用到,所以一直不明白为什么需要这些东西,面试还总是问这些. 但是随着一点点学习,也有去看过jQuery源码,虽然到现在也没怎么看懂(主要也是有些懒),但慢慢还是对这些东西有了更深的了解. 为什么需要继承 举个很简单的例子,我在平时学习写

对Javascript的原型,原型链和继承的个人理解

继承是OO语言中一个最为人津津乐道的概念,也是初接触Javascript的初学者难理解的概念=.=继承主要分为两种:一种是接口继承,另一种是实现继承.而在ECMAScript中只支持实现继承,所以我们今天来讨论讨论实现继承.实现继承就是继承实际的方法,主要依靠原型链来实现.讲到这里我们就需要讨论讨论什么是原型链. 1.什么是原型 要理解原型链我们首先要知道什么是原型.我们知道每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,这个对象包含所有实例共享的属性和方法.所以我个人

javascript 原型实现的继承

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type"

Javascript中的原型继承详解

js中的继承,是面向对象的知识,因为js没有类的概念,所以继承是通过对象实现的,谈到继承,就必须说到prototype,就不得不先说下new的过程. 一个小小的列子: <script type="text/javascript"> var Person = function () { }; var p = new Person(); </script> 我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步: <1> var p={}

JavaScript中的原型和继承

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

Javascript的原型、原型链、原型链继承

原型 在javascript中,原型分有两种:显示原型(prototype)和隐式原型(__proto__). __proto__(隐式原型) JavaScript中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问.ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf(). prototype(显式原型) 这是函数对象特有的属性.这个属性是一个指针,指向一个对象,这

详解JavaScript中的原型和继承-转自颜海镜大大

本文将会介绍面向对象,继承,原型等相关知识,涉及的知识点如下: 面向对象与继承 CEOC OLOO 臃肿的对象 原型与原型链 修改原型的方式 面向对象与继承 最近学习了下python,还写了篇博文<重拾编程乐趣——我的Python笔记>,加深了我对面向对象的一些理解. 我们会对我们写的程序进行抽象,而不同的语言都提供了不同的抽象工具,比如各种语言里面的数组,集合(键值数组,哈希表,字典等)等提供了对数据的抽象:而VB里面的子程序,类C语言里面的函数,提供了抽象代码段的能力. 有时我们希望将数据

JavaScript创建对象、原型与继承

JavaScript是一门极其灵活的语言,烂七八糟的设计是它最大的优点.不同于其他严格类型的语言例如java,学习曲线比较友好.JavaScript个人感觉上手基本不用费劲,要想上高度那就是一个悲催而且毁三观的故事.特别是有面向对象语言基础的人来说,JavaScript真像一个噩梦.JavaScript更加的零碎,封装的不是很好.你必须理清脉络深入理解了,才能写出来高大上的优雅的代码.在下尽量的用简练易懂的语言,简单的阐述一下我对JavaScript面向对象的一点粗浅的理解. 1,要想面向对象先

【转】JavaScript中的原型和继承

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由“奥迪”或“标致”这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术.轮胎的化合物成分和安全特性上