博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript面向对象编程——原型
阅读量:5869 次
发布时间:2019-06-19

本文共 4290 字,大约阅读时间需要 14 分钟。

原型的概念

原型是什么

在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;//删除Tomconsole.log(hero.name);//Marydelete hero.name;//删除Maryconsole.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")); //trueconsole.log(arr.inArray("yellow")); //false

转载地址:http://htxnx.baihongyu.com/

你可能感兴趣的文章
AUTOSAR的前期开源实现Arctic Core
查看>>
Disruptor简单应用
查看>>
抽象类与接口对比
查看>>
tarjan算法
查看>>
GreenPlum锁表处理
查看>>
myeclipse 常用快捷键总结
查看>>
栈和堆的区别【个人总结】
查看>>
Java并发编程:Callable、Future和FutureTask
查看>>
Hello,C++(8)类型转换
查看>>
尝试为有限元模拟加入场的控制
查看>>
BZOJ 4971: [Lydsy1708月赛]记忆中的背包
查看>>
第十六篇、MBprogressHUD的使用和获取当前的控制器
查看>>
利用条件运算符的嵌套来完成学生成绩的表示
查看>>
Js日期转换
查看>>
Redis进阶实践之二如何在Linux系统上安装安装Redis
查看>>
Android应用图标微技巧,8.0系统中应用图标的适配
查看>>
javascript知识图谱
查看>>
iOS 取区间值
查看>>
PHP常用函数总结(180多个)
查看>>
自定义注解并封装成jar包,实现一般方法和Controller类的入参、出参和执行时间的日志打印...
查看>>