zoukankan      html  css  js  c++  java
  • oop(Object Oriented Programming)

    嗯,昨天忙了一天没来及发,过年啊,打扫啊,什么搽窗户啊,拖地啊,整理柜子啊,什么乱七八糟的都有,就是一个字,忙。

    好了,废话也不多说,把自己学到的放上来吧。嗯,说什么好呢,就说原型链

    原型对象

      每个javascript对象都有一个原型对象,这个对象在不同的解释器下的实现不同。比如在firefox下,每个对象都有一个隐藏的__proto__属性,这个属性就是“原型对象”的引用。

    原型链

      由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefined.原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。

    怎么讲呢?直接把例子放上来讲好了

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<body>
    	<script type="text/javascript">
    		window.onload = function() {
    /*这里就大概了解一下,每一个对象都有一个原型,原型对象的方法属性,对象都可以用*/ function foo() { this.y = 2; } foo.prototype.x = 1;/*比如这里,定义了原型的属性,x=1*/ var rr = new foo(); console.log(rr.y + "和" + rr.x);/*实例化后,可以直接调用原型对象的属性,把原型看成一个类或者方法的集合就可以了*/

    /*继承*/ function person(name,sex){/*构造函数*/ this.name=name; this.sex=sex; } person.bb="我是person 上的"; person.prototype.hi=function(){ console.log(this.name+"你好"+"我是"+this.sex+"的"); } person.prototype.walk=function(){ console.log(this.name+"正在走路"); } person.prototype.a=2 function student(name,sex,like){ person.call(this,name,sex);/*我这里用call方法来继承*/ this.like=like; } student.prototype=Object.create(person.prototype); /*这里用Object.create(继承谁的?)来继承prototype,实质是person.prototype的一个空对象赋值给student.prototype*/ student.prototype.constructor = student;/*再把名字重新定义过来*/ Object.prototype.ting = function(){ console.log(this.name+"正在听") } student.prototype.chi = function(){ console.log(this.name+"喜欢吃"+this.like); } student.prototype.pa = function(xiezi){ console.log(this.name+"穿上"+xiezi+"奔跑"); } var kk = new student("bob","男","冰淇淋")/*new 实例化对象*/ // console.log(kk.a); // console.log(kk.hi()); console.log(kk.ting()) // console.log(typeof student.prototype);/*typeof 查看目标是什么类型的*/ console.log(kk.pa("鞋子")); console.log(kk instanceof person.bb)/*intanceof查看右边有没有在左边的原型链上*/ console.log(kk instanceof person) console.log(typeof kk) } </script> </body> </html>

      

  • 相关阅读:
    动态代理有啥用(总结)
    ES6随笔--各数据类型的扩展(4)--数组和对象
    ES6随笔--各数据类型的扩展(2)--数值
    ES6随笔--各数据类型的扩展(1) --字符串和正则
    ES6随笔--声明变量
    CommonJS随记
    DOM练习小记--一个简单的Web页面游戏
    js随笔--关于事件
    js随笔--关于this
    js随笔--循环里的弯弯绕
  • 原文地址:https://www.cnblogs.com/xsk-style/p/6350293.html
Copyright © 2011-2022 走看看