JavaScript 之 面向对象 [ 原型 ]

2023年4月24日 163次阅读 来源: 蔡志远

原型

形貌

  • 一切函数（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
    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016043429
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞