javascript prototype原型操作笔记


Posted in Javascript onDecember 07, 2009
//var People={name:"xiong",age:15}; 
//var Person=function(user,age){ 
//    this.name=user; 
//    this.age=age; 
//    this.say=function(){alert("I am "+this.name+"\n"+this.age);} 
//} 
//var Chairman=function(name,salary){ 
//    Person.call(this,name); 
//    } 
//var Bill=new Person("Bill",15); 
//var Hu=new Chairman("Hu Jintao"); 
//Person.prototype.eat=function(){ 
//    alert("I'm eating"); 
//    } 
//Bill.eat(); 
function Person(name) //基类构造函数 
{ 
this.name = name; 
}; Person.prototype.SayHello = function() //给基类构造函数的 prototype 添加方法 
{ 
alert("Hello, I'm " + this.name); 
}; 
function Employee(name, salary) //子类构造函数 
{ 
Person.call(this, name); //调用基类构造函数 
this.salary = salary; 
}; 
    function Xiong(name,age){ 
        Employee.call(this,name); 
        } 
Employee.prototype = new Person(); //建一个基类的对象作为子类原型的原型,这里很有意思 
    Xiong.prototype=new Employee(); 
Employee.prototype.ShowMeTheMoney = function() //给子类添构造函数的 prototype 添加方法 
{ 
alert(this.name + " $" + this.salary); 
}; 
var BillGates = new Person("Bill Gates"); //创建基类 Person 的 BillGates 对象 
var SteveJobs = new Employee("Steve Jobs", 1234); //创建子类 Employee 的 SteveJobs对象 
     var hiakuotiankong=new Xiong("海阔天空"); 
     var benbenxiong=new Xiong("笨笨熊"); 
// BillGates.SayHello(); //通过对象直接调用到 prototype 的方法 
// hiakuotiankong.SayHello(); //通过子类对象直接调用基类 prototype 的方法,关注! 
     benbenxiong.SayHello=function(){ //掩盖了原型的 SayHello 方法 
         alert("haha,I'm"+this.name); 
} 
         benbenxiong.SayHello(); 
// SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类 prototype 的方法 
// alert(BillGates.SayHello == SteveJobs.SayHello); //显示:true,表明 prototype 的方法是共享的 
    Xiong.prototype.Goodbye=function(){ 
         alert(this.name+"Bye-bye"); 
        } 
    benbenxiong.Goodbye();    

在 JavaScript 中,prototype 不但能让对象共享自己财富,而且 prototype 还有寻根问祖的
天性,从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时,如果该对象自
身不存在这样的属性或方法,就会去自己关联的 prototype 对象那里寻找;如果 prototype 没有,又会
去 prototype 自己关联的前辈 prototype 那里寻找,直到找到或追溯过程结束为止。

在 JavaScript 内部,对象的属性和方法追溯机制是通过所谓的 prototype 链来实现的。当用 new
操作符构造对象时,也会同时将构造函数的 prototype 对象指派给新创建的对象,成为该对象内置的原
型对象。对象内置的原型对象应该是对外不可见的,尽管有些浏览器(如 Firefox)可以让我们访问这个
内置原型对象,但并不建议这样做。内置的原型对象本身也是对象,也有自己关联的原型对象,这样就
形成了所谓的原型链。

在原型链的最末端,就是 Object 构造函数 prototype 属性指向的那一个原型对象。这个原型对象
是所有对象的最老祖先,这个老祖宗实现了诸如 toString 等所有对象天生就该具有的方法。其他内置
构造函数,如 Function, Boolean, String, Date 和 RegExp 等的 prototype 都是从这个老祖宗传承下
来的,但他们各自又定义了自身的属性和方法,从而他们的子孙就表现出各自宗族的那些特征。

Javascript 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 #Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 #Javascript
js event事件的传递与冒泡处理
Dec 06 #Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 #Javascript
js 操作select相关方法函数
Dec 06 #Javascript
JavaScript 对象模型 执行模型
Dec 06 #Javascript
ASP Json Parser修正版
Dec 06 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
javaScript中"=="和"==="的区别详解
2018/03/16 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
OpenCV 边缘检测
2019/07/10 Python
Python如何使用字符打印照片
2020/01/03 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
HashMap和Hashtable的区别
2013/05/18 面试题
自主招生自荐信
2013/12/08 职场文书
环境工程专业自荐信
2014/03/03 职场文书
英语求职信范文
2014/05/23 职场文书
片区教研活动总结
2014/07/02 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
单位委托书
2014/10/15 职场文书
工程合作意向书范本
2015/05/09 职场文书
单位考核鉴定意见
2015/06/05 职场文书
少年雷锋观后感
2015/06/10 职场文书
《比的意义》教学反思
2016/02/18 职场文书