追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


javascript基础———原型、原型对象和原型链

2019-9-15 释然 前端及开发文章及欣赏


原型:函数中的属性prototype,她的名字就叫原型。可以通过也只能通过prototype添加可继承的属性和方法
原型对象:函数中prototype中的__proto__ 和对象中的__proto__
先记住原型(prototype)和原型对象(proto)
下面用代码解释原型、原型对象、 原型链
<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <title>对象</title>
   </head>
   <body>
    <script type="text/javascript">
       //创建一个对象和一个函数
       var obj = {}
       console.log(obj.__proto__)//obj有原型对象
       function objFun (){}
       console.log(objFun.prototype) //objFun 原型
       console.log(objFun.prototype.__proto__) //原型中有原型对象
       console.log('***************************华丽的分割线*****************************')
       // 以objFun为构造函数 (为了把构造函数和普通函数做区分,通常把构造函数名首字母大写)
       // 添加属性和方法
       objFun.prototype.name='saozhu'
       objFun.prototype.say = function(){
        console.log(this.name+'-骚猪')
       }
       // 创建实例对象1
       var obj1=new objFun()
       console.log(obj1)//打印对象 空对象
       console.log(obj1.name) //骚猪 证明obj1继承了objFun函数的属性
       console.log('***************************华丽的分割线*****************************')
       // 此时此刻 可以理解原型链了: 
       console.log(obj1.__proto__=== objFun.prototype)
       //true 
       // 原型链是有实例对象的__proto__(原型对象)指向构造函数函数的原型(prototype)
       console.log(objFun.prototype.__proto__==window.Object.prototype)
       // true
       // 然后构造函数的原型的原型对象(prototype.__proto__)指向window.Object.protype(顶级对象的原型)
       console.log(window.Object.prototype.__proto__===null)
       // 这样的指向关系形成的链式关系就是原型链
       //链式查询,查询对象中的属性和方法,会根据这样的原型链查找,直到找到响应的属性和方法.找到window.Object.prototype.__proto__还没有值,就返回undeifne
       
    </script>
   </body>
</html>

标签: javascript基础———原型、原型对象和原型链 « 2019中国用户体验行业调查报告 | 产品思维·用户体验中的五个层次(下)»


订阅Rss