我的github
posts - 3243,  comments - 42,  views - 158万

JavaScript prototype(原型对象)

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

在前面的章节中我们学会了如何使用对象的构造器(constructor):

复制代码
function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
复制代码

我们也知道在一个已存在构造器的对象中是不能添加新的属性:

要添加一个新的属性需要在在构造器函数中添加:

prototype 继承

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法:

  • Date 对象从 Date.prototype 继承。
  • Array 对象从 Array.prototype 继承。
  • Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外,有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

 当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法:

复制代码
function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.getName = function() {
  return this.firstName + " " + this.lastName;
};
复制代码

参考:https://www.runoob.com/js/js-object-prototype.html

在JavaScript中,prototype对象是实现面向对象的一个重要机制。 每个函数就是一个对象(Function),函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。

参考2:https://baike.baidu.com/item/prototype/14335187?fr=aladdin

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

所以我们可以String().Function。。来调用它的内置方法,因为它是对象类型。

因此,可以说,JS中所有的数据类型都是对象

创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

  • 使用 Object 定义并创建对象的实例。
  • 使用函数来定义对象,然后创建新的对象实例。

使用 Object

在 JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法。

使用对象构造器

本例使用函数来构造对象:

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

把属性添加到 JavaScript 对象

您可以通过为对象赋值,向已有对象添加新属性:

假设 person 对象已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象

JavaScript 基于 prototype,而不是基于类的。

参考3:https://www.runoob.com/js/js-objects.html

例子:

复制代码
       function _(viewer, options = {}) {

            if (viewer && viewer instanceof Cesium.Viewer) {

                this._drawLayer = new Cesium.CustomDataSource('measureLayer')

                viewer && viewer.dataSources.add(this._drawLayer)

                this._basePath = options.basePath || ''

                this._viewer = viewer
            }
        }
复制代码

执行之后,会创建一个名为_的函数对象。构造函数为_。构造参数为viewer和options。

复制代码
   _.prototype = {
            /***
             * 坐标转换 84转笛卡尔
             * 
             * @param {Object} {lng,lat,alt} 地理坐标
             * 
             * @return {Object} Cartesian3 三维位置坐标
             */
            transformWGS84ToCartesian: function (position, alt) {
                if (this._viewer) {
                    return position
                        ? Cesium.Cartesian3.fromDegrees(
                            position.lng || position.lon,
                            position.lat,
                            position.alt = alt || position.alt,
                            Cesium.Ellipsoid.WGS84
                        )
                        : Cesium.Cartesian3.ZERO
                }
            },
  }
复制代码

执行之后_的原型增加了几个函数。

posted on   XiaoNiuFeiTian  阅读(108)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
历史上的今天:
2020-12-01 使用OpenLayers加载ArcGIS Server矢量图层
2020-12-01 ArcGIS Server在线编辑功能
2016-12-01 C++网络编程 Java网络编程
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示