JavaScript原型链示例分享

 更新时间:2014年01月26日 15:08:45   作者:  
这篇文章主要介绍了JavaScript原型链示例,有需要的朋友可以参考一下

复制代码 代码如下:

<mce:script type="text/javascript"><!--
/*
   每个对象实例都有个属性成员用于指向到它的instanceof 对象(暂称为父对象)的原型(prototype)
   我们把这种层层指向父原型的关系称为[原型链 prototype chian]
   原型也具有父原型,因为它往往也是一个对象实例,除非我们人为地去改变它
   在JavaScript中,"一切都是对象,函数是第一型。"
   Function和Object都是函数的实例。
   Function的父原型指向到Function的原型,Function.prototype的父原型是Object的原型
   Object的父原型也指向到Function的原型,Object.prototype是所有父原型的顶层
   在spiderMonkey引擎中,父原型可以通过 __proto__ 进行访问
*/
Function.prototype.hi = function(){alert('hi Function');}
Object.prototype.hi = function(){alert('hi Object');}
var a = function(){
    this.txt = "a";
}
a.prototype = {
    say:function(){alert('a');}
}
alert(a instanceof Function);//a是Function的实例;
alert(a.__proto__ === Function.prototype);//a的父原型指向到Function的原型;
alert(Function instanceof Object);//Function是Object的实例;
alert(Function.__proto__ === Function.prototype);//Function的父原型指向到Function的原型;
alert(Function.prototype.__proto__ === Object.prototype);//Function的原型的父原型指向到Object的原型
alert(Object.__proto__ === Function.prototype);//Object的父原型指向到Function的原型;
alert(Object.prototype.__proto__);//Object的原型是所有父原型的顶端,它不再具有父原型;

alert(a.prototype instanceof Object);//a的原型也是一个对象
alert(a.prototype.__proto__ === Object.prototype);//a的原型的父原型指向Object的原型

var A = function(){};
A.prototype = new a();
A.prototype.say = function(){
    alert('A');
}
alert(A instanceof Function);//A是Function的实例
alert(A.__proto__ === Function.prototype);//A的父原型指向到Function的原型
alert(A.prototype instanceof a);//A的原型是a的实例
alert(A.prototype.__proto__ === a.prototype);//A的原型的父原型指向到a的原型

var iA = new A();//iA是A的实例,iA.__proto__ === A.prototype
var iB = new a();//iB是a的实例,iB.__proto__ === a.prototype
iA.hi();
/*
iA本身没有hi方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,也没有找到,
于是再找A.prototype.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Object
*/
iB.hi();
/*
iB本身没有hi方法(构造中没有,自己也没有定义过),
于是找iB.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Object
*/
a.hi();
/*
a本身没有hi方法(构造中没有,自己也没有定义过),
于是找a.__proto__既Function.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Function
*/
iA.say();
/*
iA本身没有say方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,哇,发现了say,于是调用它,停止查找
所以,这里调用的是A.prototype.say
输出:A
*/
iB.say();
/*
iB本身没有say方法(构造中没有,自己也没有定义过),
于是找iB.__proto__即a.prototype,哇,发现了say,于是调用它,停止查找
所以,这里调用的是a.prototype.say
输出:a
*/
iA.bad();
/*
iA本身没有bad方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,也没有找到,
于是再找A.prototype.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,终于是找不到了,停止查找
返回错误,iA.bad不是一个function
*/
// --></mce:script>

</script>

感谢simon提出的修正意见!所有实例在查找属性方法时不会去查找自己的prototype(实例的prototype不在原型链内,只能作为一个属性)!

相关文章

  • JavaScript基于replace+正则实现ES6的字符串模版功能

    JavaScript基于replace+正则实现ES6的字符串模版功能

    这篇文章主要介绍了JavaScript基于replace+正则实现ES6的字符串模版功能,结合实例形式分析了replace结合正则实现ES6字符串模板功能的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 详解webpack的clean-webpack-plugin插件报错

    详解webpack的clean-webpack-plugin插件报错

    这篇文章主要介绍了详解webpack的clean-webpack-plugin插件报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 简单了解three.js 着色器材质

    简单了解three.js 着色器材质

    这篇文章主要介绍了three.js 着色器材质的相关资料,文中讲解非常详细,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • 一文详解JavaScript数组对象和字符串对象

    一文详解JavaScript数组对象和字符串对象

    这篇文章主要介绍了JavaScript数组对象和字符串对象,文章中有详细的代码示例,对学习或工作有一定的帮助,需要的小伙伴可以参考一下
    2023-04-04
  • Vue.js实现页面后退时还原滚动位置的操作方法

    Vue.js实现页面后退时还原滚动位置的操作方法

    Vuet看起来也不是很复杂,只需要定义好模块状态,然后在组件中设置对应的规则来更新模块的状态即可,这篇文章主要介绍了Vue.js实现页面后退时还原滚动位置的实现方法,需要的朋友可以参考下
    2022-07-07
  • JavaScript仿京东搜索框实例

    JavaScript仿京东搜索框实例

    这篇文章主要为大家详细介绍了JavaScript仿京东搜索框实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • js数组去重的方法汇总

    js数组去重的方法汇总

    本文给大家汇总介绍了3种javascript数组去重的方法以及示例,十分的简单实用,有需要的小伙伴可以参考下。
    2015-07-07
  • 用微信小程序实现计算器功能

    用微信小程序实现计算器功能

    这篇文章主要为大家详细介绍了用微信小程序实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • uni-app小程序分享功能实现方法举例

    uni-app小程序分享功能实现方法举例

    这篇文章主要给大家介绍了关于uni-app小程序分享功能实现方法的相关资料,uni-app中有分享的API接口,但是需要现在QQ或者微信等开发者平台上注册账号,验证公司信息,而且只能分享图片或者文本等内容,需要的朋友可以参考下
    2023-07-07
  • footer定位页面底部(代码分享)

    footer定位页面底部(代码分享)

    本文主要分享了footer定位页面底部的实例代码,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论