原型

描述

  • 所有函数(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

蔡志远
9 声望5 粉丝