JavaScript 之面向对象 [ 原型 ]

warmcheng 发布于2019-08-26 12:14 / 1282人阅读

摘要：原型描述所有函数类型都具有的属性在函数进行定义时，就包含属性属性的默认值为一个空对象获取原型第一种构造函数的属性第二种对象提供的方法啊哈哈所有函数都具有属性，可以直接调用显示类型包含构造函数所有引用类型都可以使用构造函数方式定义所有引用类

原型描述

所有函数（Function类型）都具有的属性

在函数进行定义时，就包含prototype属性

prototype属性的默认值为一个空对象｛｝

获取原型

第一种

构造函数的prototype属性

第二种

Object对象提供的getPrototypeOf()方法

</>复制代码 
function fun() {
    console.log( "啊哈哈" );
}
/* 所有函数都具有prototype属性，可以直接调用 */
console.log( fun.prototype );// 显示 fun {}
/*
    Function类型包含 构造函数
     * 所有引用类型都可以使用 构造函数方式定义 - 所有引用类型都是构造函数
     * 构造函数也可以用来定义对象（Object类型） - Object也可以调用prototype属性
 */
/* 引用类型调用prototype属性 */
console.log( String.prototype );// 显示 [String: ""]
/* Object调用prototype属性 */
console.log( Object.prototype );// 显示 {}
/*
    获取原型
     * 可以通过以下两种方法获取指定目标的原型
     * 第一种
      * 构造函数的prototype属性
     * 第二种
      * Object对象提供的getPrototypeOf()方法
 */
/* 定义一个函数 */
function fn() {
    console.log( "呕呀呀" );
}
/* 通过prototype属性获取 */
console.log( fn.prototype );// 显示 fn {}
/* 通过getPrototypeOf()方法获取 */
console.log( Object.getPrototypeOf( fn ) );// 显示 [Function]

原型新增属性或方法

获取的原型会得到一个空对象

是对象就有属性或方法

也可以新增属性或方法

新增方式

第一种方式

构造函数.prototype.属性名（方法名） = 属性值（方法体）

</>复制代码 
/* 定义一个函数 */
function fun() {
    console.log( 100 );
}
/* 第一种方式 */
/* 获取原型 */
console.log( fun.prototype );// 显示 fun {}
/* 为原型添加属性或方法 */
fun.prototype.name = "唐三";
/* 才重新获取原型 */
console.log( fun.prototype );// 显示 fun { name: "唐三" }

第二种方式

Object.defineProperty( 获取原型，属性名（方法名），{ 属性描述符 } )

</>复制代码 
/* 定义一个函数 */
function fun() {
    console.log( 100 );
}
/* 第二种方式 */
/* 获取原型 */
console.log( fun.prototype );// 显示 fun { name: "唐三" }
/* 为原型添加属性或方法 */
Object.defineProperty( fun.prototype, "nian", {
    /* 设置属性值或方法体 */
    value : 20,
    /*
        设置是否可枚举
         * 用于打印对象时可以正常显示新增的属性
         * 不设置可枚举时将无法显示新增属性，只显示原有属性
          * 显示 fun { name: "唐三" }
     */
    enumerable : true
} );
/* 才重新获取原型 */
console.log( fun.prototype );// 显示 fun { name: "唐三", nian: 20 }

自有属性和原型属性 自有属性

构造函数（对象）本身自带或添加的属性

原型属性

从原型中获得属性

</>复制代码 
/* 定义一个构造函数 */
function Fun() {
    /* 设置自有属性和方法 */
    this.name = "唐三";
    this.menpai = function () {
        console.log( "唐门" );
    }
}
/* 获取原型 */
console.log( Fun.prototype );//Fun {}
/* 为原型添加新属性 - 原型属性 */
Fun.prototype.nian = 20;
/* 在获取原型 */
console.log( Fun.prototype );//Fun { nian: 20 }
/*
    通过构造函数Fun创建对象
     * 该对象具有构造函数Fun的自有属性
     * 该对象也具有构造函数Fun的原型属性
 */
/* 创建对象 */
var fn = new Fun();
/* 调用自有属性 */
console.log( fn.name );// 显示 唐三
/* 调用原型属性 */
console.log( fn.nian );// 显示 20
/* 使用相同的构造函数在创建一个对象 */
var fu = new Fun();
/* 新对象对自有属性进行修改 */
fu.name = "融念冰";
/* 调用修改的自有属性 */
console.log( fu.name );// 显示 融念冰
/* 两个对象之间不会有影响 */
console.log( fn.name );// 显示 唐三
/* 修改原型属性 */
Fun.prototype.nian = 25;
/* 以构造函数Fun创建的对象都会被修改 */
console.log( fn.nian );// 显示 25
console.log( fu.nian );// 显示 25

重写属性

表示在自有属性和原型属性同名时，自有属性会覆盖原型属性

</>复制代码 
/* 定义一个构造函数 */
function Fun() {
    /* 自有属性 */
    this.name = "唐三";
}
/* 获取原型并添加原型属性 */
Fun.prototype.name = "融念冰";
/* 创建一个对象 */
var fn = new Fun();
/* 调用属性 */
console.log( fn.name );// 显示 唐三（自身属性）

删除属性

通过delete关键字来进行删除

如果进行删除的目标对象同时具有自有属性和原型属性，会先删除自有属性

</>复制代码 
/* 定义一个构造函数 */
function Fun() {
    /* 自有属性 */
    this.name = "唐三";
}
/* 获取原型并添加原型属性 */
Fun.prototype.name = "融念冰";
/* 创建一个对象 */
var fn = new Fun();
/* 调用属性 */
console.log( fn.name );// 显示 唐三（自身属性）
/*
    删除属性
     * 通过delete关键字来进行删除
     * 如果进行删除的目标对象同时具有自有属性和原型属性，会先删除自有属性
 */
/* 删除目标对象的指定属性 */
delete fn.name;// 优先删除自有属性
/* 在调用已删除的属性 */
console.log( fn.name );// 显示 融念冰（原型属性）

检测属性

表示检测目标对象中，是否存在指定属性

Object.hasOwnProperty()方法

Object.hasOwnProperty( 指定属性名称 )方法

用于判断当前指定属性是否为自有属性

true - 表示存在

false - 表示不存在

</>复制代码 
/* 定义一个构造函数 */
function Fun() {
    /* 自有属性 */
    this.name = "唐三";
}
/* 原型属性 */
Fun.prototype.name = "融念冰";
/* 创建对象 */
var fn = new Fun();
/* Object.hasOwnProperty()方法 */
console.log( fn.hasOwnProperty(  "name") );// 显示 true

in 关键字

in 关键字 - （属性名 in 对象名）

用于判断对象中是否存在指定属性(自有属性或原型属性)

true - 表示存在

false - 表示不存在

</>复制代码 
/* 定义一个构造函数 */
function Fun() {
    /* 自有属性 */
    this.name = "唐三";
}
/* 原型属性 */
Fun.prototype.name = "融念冰";
/* 创建对象 */
var fn = new Fun();
/* in 关键字 */
console.log( "name" in fn );// 显示 true

显示原型和隐式原型 显示原型

所有函数的原型（prototype）都可以称为是显示原型

隐式原型

所有对象的原型（__proto__）都可以称为是隐式原型

</>复制代码 
/* 定义一个构造函数 */
function Fun() {
    /* 自有属性 */
    this.name = "唐三";
}
/* 原型属性 */
Fun.prototype.nian = 20;
/* 创建对象 */
var fn = new Fun();
/* 调用自有属性 */
console.log( fn.name );// 显示 唐三
/* 调用原型属性 */
console.log( fn.nian );// 显示 20
/* 对象调用函数的原型 */
console.log( fn.prototype );// 显示 undefined 对象会将prototype，当做自身的属性进行调用
/* 对象调用对象的原型 */
console.log( fn.__proto__ );// 显示 Fun { nian: 20 }

isPrototypeOf()方法

表示用于判断一个指定对象是否为另一个目标对象的原型

true - 表示是

false - 表示不是

</>复制代码 
/* 定义一个对象 */
var obj = {
    name : "唐三"
}
/* 定义一个构造函数 */
function Fun() {}
/* 将指定对象赋值给构造函数Fun的原型 */
Fun.prototype = obj;
/* 创建对象 */
var fn = new Fun();
/* 判断obj对象是否为fn对象的原型 */
console.log( obj.isPrototypeOf(  fn) );// 显示 true

GPU云服务器云服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

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

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

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
面向对象的JavaScript之继承(一) 类式继承

摘要：那你们肯定会问为什么共用，而没有共用呢，下面就给你解释，请看引用类型是共用的值类型是私用的。引言面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的. 继承的方式类式继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承 1.类式继承 //声明父...

forsigner 2019-08-20 14:21 评论0 收藏0
javascript面向对象之“多态”

摘要：之前，本质上不能算是一门面向对象的编程语言，因为它对于封装继承多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。所以在中出现了等关键字，解决了面向对象中出现了问题。 ES6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以让我们以...

JerryWangSAP 2019-08-23 14:11 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0

发表评论

登陆后可评论

0条评论

warmcheng

男|高级讲师

我要关注我要私信

TA的文章

DMIT：中国香港大带宽VPS补货，1核/750M内存/10G ssd/2000G@1000M，$6

阅读 3136·2021-11-16 11:51
window云主机怎么使用-云主机怎么使用？

阅读 2735·2021-09-22 15:02
5082万！UCloud优刻得中标德阳智慧工业管理云平台

阅读 3913·2021-08-04 10:21
flex布局 justify-content：space-between; 解决最后一排数量不够自动

阅读 3779·2019-08-30 15:43
六种组织CSS的方式

阅读 2075·2019-08-30 11:04
css 定位

阅读 3722·2019-08-29 17:14
CSS || 响应式网格

阅读 625·2019-08-29 12:16
css的实现元素垂直居中

阅读 3053·2019-08-28 18:31

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

JavaScript 之面向对象 [ 原型 ]

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

**面向对象的JavaScript之继承(一) 类式继承**

javascript面向对象之“多态”

面向对象的 JavaScript

发表评论

0条评论

warmcheng

男|高级讲师

TA的文章

DMIT：中国香港大带宽VPS补货，1核/750M内存/10G ssd/2000G@1000M，$6

window云主机怎么使用-云主机怎么使用？

5082万！UCloud优刻得中标德阳智慧工业管理云平台

flex布局 justify-content：space-between; 解决最后一排数量不够自动

六种组织CSS的方式

css 定位

CSS || 响应式网格

css的实现元素垂直居中

最新活动

企业采购季！

多种GPU机型限时特惠

GPU算力平台

高等级、高电力的数据中心托管服务

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

JavaScript 之 面向对象 [ 原型 ]

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动

JavaScript 之面向对象 [ 原型 ]