JavaScript 之 面向对象 [ 原型 ]

原型

描述

• 全部函数（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