JavaScript 之原型与周边

codecook 发布于2019-08-19 17:17 / 738人阅读

摘要：除此之外，原型是共享的，如果我们有的写法，改变这两个对象任何一个的原型都会影响另外一个，这在大多的情况下是不可取的。当对象查找一个属性的时候，他会沿着原型链一直往上追踪，直到直到为之。在性能方面，原则上应该尽量避免原型链太长。

简介

如果之间学习过cpp 、java 之类的语言，都会知道他们是可以基于类 class 进行继承的，在JavaScript 中，并没有类继承这个概念，要实现JavaScript 中的继承，需要原型来帮助。

比如在下面的这段代码中：

function Foo () {
  this.value = 1;
};

Foo.prototype = {
  method: function () {};
};

//设置Bar的原型为Foo()的实例
Bar.prototype = new Foo();
Bar.prototype.foo = "Hello World";

//修正Bar的constructor
Bar.prototype.constructor = Bar;

//创建一个Bar的实例
var test = new Bar();

在这段代码中，就一直维护着一个原型链，抽象化的理解起来可能是这样的：

test [Bar的实例]
     Bar.prototype [Foo的实例]
         {foo: "Hello World!"}
         Foo.prototype
            {method: function(){}}
            Object.prototype
                {...}

很好去理解，test 是从Bar.prototype 和 Foo.prototype 中继承下来的，所以他能够访问Foo 实例属性中的value 。

需要注意的是，在 new Bar 操作中，并不会重新创建一个Foo 的实例，而是会重复的使用在他的原型上的那个实例。

除此之外，原型是共享的，如果我们有Foo.prototype = Bar.prototype 的写法，改变这两个对象任何一个的原型都会影响另外一个，这在大多的情况下是不可取的。

当对象查找一个属性的时候，他会沿着原型链一直往上追踪，直到直到为之。当然 Object.prototypr 就是这个链的最后一层了，如果还是没找到，就会返回undefined 。

hasOwnProperty

在性能方面，原则上应该尽量避免原型链太长。正如用for ... in ... 去遍历的时候，他会去遍历整个原型链，这往往在比较高的性能要求或者普通的遍历中是不可取的。

为了去判断一个对象包含的属性是他本身就有的还是在原型链上的，需要使用继承在Object prototype 上的hasOwnProperty 方法。

比如在下面的例子中

Oboject.prototype.bar = 1;

var foo = {
  value: 2；
};

foo.var          //通过原型链继承自Object，输出1
"bar" in foo;    //通过整个原型链进行查找，输出true

foo.hasOwnProperty("bar");    //false
foo.hasOwnProperty("value")   //true

在for ... in ... 的遍历中，一般建议使用hasOwnProperty 的方法。

需要注意的是： javascript并没有对hasOwnProperty 做相关的保护，如果恰巧对象有这个叫做hasOwnProperty 的属性，那么产生的结果应该不是我们所期待的。比如像下面这样：

var foo = {
  hasOwnProperty: function () { return flase};
  bar: "1";
};

foo.hasOwnProperty("bar") //正如你猜的那样，返回的值永远是false

这时候可能需要做的就是调用外部的hasOwnproperty，对，就是用call 或者apply。像下面这样：

//返回true
Object.hasOwnProperty.call(foo, "bar");
Object.hasOwnProperty.apply(foo, ["bar"]);

原文链接：http://life.rccoder.net/javascript/1207.html

服务器托管海外云主机 javascript原型周边与Javascript 成都周边地域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78374.html

体验javascript之美6：如果你觉得什么都会了或者不知道js学什么了看这里-面向对象编程

摘要：面向过程函数式编程面向对象编程第二个并不是大家理解的那样，我们先说举个现实例子就明白了。多说一句函数是编程是非常强大也是我最喜欢的，以后再说，我们先说面向对象编程。概述当大家已经把js的语言基础理解了，然后能够写出一些简单的例子了，这个时候基本上达到了一年工作经验的水平，而自己能够独立的写一些小功能，完成一些小效果，或者临摹修改一些比较复杂的插件的时候差不多就是两年工作经验的水平，...

changfeng1050 2019-08-20 15:59 评论0 收藏0
如何安全过渡到公共云

摘要：简而言之，公司需要采取主动系统的方法，使网络安全功能可以适应公共云。将开发运维应用于网络安全如果开发人员可以在短短几秒内启动服务器，但必须等待两周的时间才能让安全团队认同配置，这会削弱公共的云灵活性所带来的价值。随着企业不断扩大对公共云的使用，它们必须反思如何保护数据和应用程序，并实施四项关键实践。经过长时间的实验，龙头企业正在认真考虑大规模采用公共云。在过去几年中，很多公司已经改变了IT战...

Terry_Tai 2019-04-30 17:35 评论0 收藏0
JavaScript深入之从原型到原型链

摘要：深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。让我们用一张图表示构造函数和实例原型之间的关系在这张图中我们用表示实例原型。 JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先...

Songlcy 2019-08-21 15:32 评论0 收藏0
进击JavaScript之（四）原型与原型链

摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。本文您将看到以下内容：传统构造函数的问题一些相关概念认识原型构造、原型、实例三角结构图对象的原型链函数的构造函数Function 一句话说明什么...

XBaron 2019-08-20 10:45 评论0 收藏0