JavaScript面向对象编程——原型

付伦发布于2019-08-26 12:13 / 1187人阅读

摘要：类型的属性所有函数都具有的属性定义函数原型的默认值是空对象函数包含构造函数所有引用类型其实都是构造函数获取原型通过下面代码方式获取对象的原型，从而设置共享的属性和方法。属性是指定构造函数的属性。通过构造函数创建对象表示当前的数组

原型的概念 原型是什么

在JavaScript中，函数时一个包括属性和方法的Function类型的对象。而原型（Prototype）就是Function类型对象的一个属性。
在函数定义时就包含了protoype属性，它的初始值是一个空对象。在JavaScript中并没有定义函数的原始类型，所以原型可以是任何类型。
原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数本身的属性和方法。

 Function类型的属性 -> 所有函数都具有的属性
console.log(Function.prototype);
// 定义函数
function fn(){
    console.log("this is function");
}
// 原型的默认值是空对象
console.log(fn.prototype);
// 函数包含构造函数 -> 所有引用类型其实都是构造函数
console.log(Number.prototype);

console.log(Object.prototype);

var result = Object.getOwnPropertyDescriptor(Object.prototype, "constructor");
console.log(result);

获取原型

通过下面代码方式获取对象的原型，从而设置共享的属性和方法。

function fn(){
    console.log("this is function");
}
// 使用访问对象的属性语法结构
console.log(fn.prototype);
console.log(fn["prototype"]);
// Object类型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));

原型的属性和方法

function fn(){
    console.log("this is function");
}
// 变量proto也是一个空对象
// var proto = fn.prototype;

// 新增属性或方法
// proto.name = "张无忌";
fn.prototype.name = "张无忌";
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, "age", {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

原型属性 自主属性与原型属性

1.自有属性：通过对象的引用添加的属性。其他对象可能无此属性；即使有，也是彼此独立的属性。
2.原有属性：从原型对象中继承来的属性，一旦原型对象中属性值改变，所有继承自该原型的对象属性均改变。

// 定义构造函数
function Hero(){
    this.name = "张无忌";
    this.sayMe = function(){
        console.log("this is function");
    }
}
// 操作构造函数Hero的原型
Hero.prototype.age = 18;
// 利用构造函数来创建对象
var hero = new Hero();
console.log(hero);
// 为构造函数的原型新增的属性 -> 构造函数创建的对象中依旧可以访问
console.log(hero.age);// 18
// 对象hero中不存在age属性
var result = Object.getOwnPropertyDescriptor(hero, "age");
console.log(result);

检测自有或原型属性

function Hero(){
    // this.name = "张无忌";// 自有属性
}
// Hero.prototype.name = "周芷若";

var hero = new Hero();
/*
    Object.hasOwnProperty(prop)方法
    * 作用 - 判断当前指定属性是否为自有属性
    * 参数
      * prop - 表示指定属性名称
    * 返回值 - 布尔值
      * true - 表示存在指定的自有属性
      * false - 表示不存在指定的自有属性
 */
// console.log(hero.hasOwnProperty("name"));// true
/*
    使用in关键字检测对象的属性
    * 作用 - 判断对象中是否存在指定属性(自有属性或原型属性)
    * 返回值 - 布尔值
      * true - 表示存在指定的属性
      * false - 表示不存在指定的属性
 */
console.log("name" in hero);

扩展属性或方法

通过原型可以为指定构造函数或对象扩展其属性或方法。

function fn(){
    console.log("this is function");
}
// 变量proto也是一个空对象
// var proto = fn.prototype;

// 新增属性或方法
// proto.name = "张无忌";
fn.prototype.name = "张无忌";
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, "age", {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

重写原型属性

通过构造函数或对象的自有属性可以重写原型的属性

// 定义构造函数
function Hero(){
    this.name = "张无忌";
}
// 构造函数的原型
Hero.prototype.name = "周芷若";
// 构造函数创建对象
var hero = new Hero();
// 自有属性与原型属性同名时，默认访问的是自有属性 -> 自有属性的优先级别高于原型属性
console.log(hero.name);// 张无忌

// 删除对象的属性
delete hero.name;
// 重新访问对象的属性
console.log(hero.name);// 周芷若

删除属性

通过delete关键字可以删除对象的属性，如果该对象即具有原型属性又具有自有属性，首先就要删除自有属性，再删除原型属性。

function Hero（）{}
Hero.prototype = {
        name："Mary",salary:3800
};
var hero = new Hero();
hero.name = "Tom";

delete hero.name;//删除Tom
console.log（hero.name）；//Mary

delete hero.name；//删除Mary
console.log（hero.name）；//undefined

isPrototypeOf（）方法

每个对象中都会基友一个isPrototypeOf（）方法，该方法用来判断一个对象是否是另一个对象的原型。

// 通过初始化器方式定义对象
var obj = {
    name : "张无忌"
}
// 定义构造函数
function Hero(){}
// 将对象obj赋值给构造函数Hero的原型
Hero.prototype = obj;
// 通过构造函数创建对象
var hero = new Hero();
// 判断指定对象是否是另一个对象的原型
var result = obj.isPrototypeOf(hero);

console.log(result);

——proto——属性

// 通过初始化器方式定义对象
var obj = {
    name : "张无忌"
}
// 定义构造函数
function Hero(){}
// 将对象obj赋值给构造函数Hero的原型
Hero.prototype = obj;
// 通过构造函数创建对象
var hero = new Hero();
// 判断指定对象是否是另一个对象的原型
var result = obj.isPrototypeOf(hero);

console.log(result);

上述代码中说明hero对象存在一个指向构造函数Hero的原型，这个链接被叫做——proto——属性。
需要注意的是——proto——属性与prototype属性并不等价。——proto——属性只能调试时使用。
——proto——属性是指定对象的属性。
prototype属性是指定构造函数的属性。

扩建内建对象

JavaScript中的内置对象有些也具有prototype属性，利用内置对象的prototype属性可以为内置对象扩展属性或方法。
通过原型扩展内置对象的属性和方法非常灵活，根据个性化要求制定JavaScript语言的具体内容。一般建议谨慎使用这种方法，如果JavaScript的版本更新是可能会提供个性化的属性或方法，导致冲突。

Object.prototype.sayMe = function(){
    console.log("this is sayMe function");
}
// 通过Object构造函数创建对象
var obj = new Object();

obj.sayMe();


Array.prototype.inArray = function(color){
    // this - 表示当前的数组
    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green", "blue"];

console.log(arr.inArray("red")); //true
console.log(arr.inArray("yellow")); //false

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/108262.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面向对象编程

摘要：如果要理解基于原型实现面向对象的思想，那么理解中得三个重要概念构造函数原型原型链对帮助理解基于原型的面向对象思想就显得尤为重要。函数对象的原型在中，函数是一种特殊的对象，所有的函数都是构造函数的实例。介绍和java这种基于类（class-base）的面向对象的编程语言不同，javascript没有类这样的概念，但是javascript也是面向对象的语言，这种面向对象的方式成为基...

wanglu1209 2019-08-21 10:32 评论0 收藏0
JS对象(1)重新认识面向对象

摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象从设计模式上看，对象是...

superw 2019-08-21 11:17 评论0 收藏0
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript

摘要：在中，并没有对抽象类和接口的支持。例如，当对象需要对象的能力时，可以有选择地把对象的构造器的原型指向对象，从而达到继承的效果。本节内容为设计模式与开发实践第一章笔记。动态类型语言编程语言按数据类型大体可以分为两类：静态类型语言与动态类型语言。静态类型语言在编译时已确定变量类型，动态类型语言的变量类型要到程序运行时，待变量被赋值后，才具有某种类型。而JavaScript是一门典型...

suxier 2019-08-21 10:44 评论0 收藏0