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 相关文章推荐
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 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
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python 生成器需注意的小问题
2020/09/29 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
J2EE包括哪些技术
2016/11/25 面试题
捐助倡议书范文
2014/04/15 职场文书
运动员获奖感言
2014/08/15 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
今日说法观后感
2015/06/08 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript