当前位置: 首页 > news >正文

深入学习之原型和原型模式

 //1、每一个函数数据类型(普通函数、类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值
    //2、并且在prototype上浏览器天生给它加了一个属性constructor(构造函数),属性值是当前函数(类)本身
    //3、每一个对象数据类型(普通的对象、实例、prototype...)也天生自带一个属性:__proto__,属性值是当前实例所属类的原型(prototype)

//3、原型链模式
    //f1.hasOwnProperty("x");//->hasOwnProperty是f1的一个属性
    //但是我们发现在f1的私有属性上并没有这个方法,那如何处理的呢?
    //1)通过 对象名.属性名 的方式获取属性值的时候,首先在对象的私有的属性上进行查找,如果私有中存在这个属性,则获取的是私有的属性值;
    //如果私有的没有,则通过__proto__找到所属类的原型(类的原型上定义的属性和方法都是当前实例公有的属性和方法),原型上存在的话,获取的是公有的属性值;
    //如果原型上也没有,则继续通过原型上的__proto__继续向上查找,一直找到Object.prototype为止...
    //-->这种查找的机制就是我们的"原型链模式"

    function Fn() {
        this.x = 100;
        this.sum = function () {
        };
    }
    Fn.prototype.getX = function () {
        console.log(this.x);
    };
    Fn.prototype.sum = function () {
    };
    var f1 = new Fn;
    var f2 = new Fn;

    console.log(Fn.prototype.constructor === Fn);//->true

    //2、Object是JS中所有对象数据类型的基类(最顶层的类)
    //1)、f1 instanceof Object ->true 因为f1通过__proto__可以向上级查找,不管有多少级,最后总能找到Object
    //2)、在Object.prototype上没有__proto__这个属性


    //3、原型链模式
    //f1.hasOwnProperty("x");//->hasOwnProperty是f1的一个属性
    //但是我们发现在f1的私有属性上并没有这个方法,那如何处理的呢?
    //1)通过 对象名.属性名 的方式获取属性值的时候,首先在对象的私有的属性上进行查找,如果私有中存在这个属性,则获取的是私有的属性值;
    //如果私有的没有,则通过__proto__找到所属类的原型(类的原型上定义的属性和方法都是当前实例公有的属性和方法),原型上存在的话,获取的是公有的属性值;
    //如果原型上也没有,则继续通过原型上的__proto__继续向上查找,一直找到Object.prototype为止...
    //-->这种查找的机制就是我们的"原型链模式"

    //    f1.getX === f2.getX - > true
    //    f1.__proto__.getX === f2.getX - > true
    //    f1.getX === Fn.prototype.getX - > true

    //    f1.sum === f2.__proto__.sum - > false
    //    f1.sum === Fn.prototype.sum; - > false



    var num = 12;
    var obj = {
        num:13,
        fn: (function (num) {
            this.num = num + 20;
            num += 20;
            return function () {
                this.num = num + 20;
                num += 20;
                console.log(num);
            }
        })(num)//->12
    };
    var fn = obj.fn;
    fn();
    obj.fn();
    console.log(window.num, obj.num);



    //所有的对象数据类型(普通对象、数组、正则、实例、类的原型...)都是Object这个基类的一个实例
    //所有的函数数据类型(普通函数、内置类、自定义类...)都是Function这个基类的一个实例
    //函数或者类都是函数数据类型,所有的函数数据类型都是Function的一个实例,所有的实例都是对象数据类型的 -> 函数也是对象数据类型的值

相关文章:

  • 深入学习之求数组中最大值和最小值
  • 使Java代码可移植之二
  • 深入学习之回流和重绘
  • henson.midp.Float浮点类介绍
  • 深入学习之css三角形
  • J2ME中的字符串管理和多语言支持
  • 深入学习之图片延迟加载
  • 深入学习之加载机制
  • 封装MathFP和FloatBox
  • 深入学习之事件兼容2 以及二级事件
  • 看了网友Roy的评论,研究了一下用filter来解决Struts中文乱码的问题!
  • 深入学习之h5 以及媒体查询
  • 保护自己的MIDlet程序之二:TimeProtector
  • 深入学习之动画
  • 保护自己的MIDlet程序之三:SNProtector
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • JavaWeb(学习笔记二)
  • MyEclipse 8.0 GA 搭建 Struts2 + Spring2 + Hibernate3 (测试)
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • VUE es6技巧写法(持续更新中~~~)
  • Vue2 SSR 的优化之旅
  • 使用Gradle第一次构建Java程序
  • 世界上最简单的无等待算法(getAndIncrement)
  • 微信公众号开发小记——5.python微信红包
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解 ...
  • 回归生活:清理微信公众号
  • ​​​​​​​​​​​​​​Γ函数
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • ​VRRP 虚拟路由冗余协议(华为)
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • #常见电池型号介绍 常见电池尺寸是多少【详解】
  • (1)安装hadoop之虚拟机准备(配置IP与主机名)
  • (2015)JS ES6 必知的十个 特性
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (附源码)springboot高校宿舍交电费系统 毕业设计031552
  • (附源码)计算机毕业设计ssm基于B_S的汽车售后服务管理系统
  • (七)Java对象在Hibernate持久化层的状态
  • (一)认识微服务
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转)人的集合论——移山之道
  • (转载)利用webkit抓取动态网页和链接
  • .net wcf memory gates checking failed
  • .NET/C# 在 64 位进程中读取 32 位进程重定向后的注册表
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • @autowired注解作用_Spring Boot进阶教程——注解大全(建议收藏!)
  • @select 怎么写存储过程_你知道select语句和update语句分别是怎么执行的吗?
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [ 转载 ] SharePoint 资料
  • []利用定点式具实现:文件读取,完成不同进制之间的
  • [2009][note]构成理想导体超材料的有源THz欺骗表面等离子激元开关——
  • [2018/11/18] Java数据结构(2) 简单排序 冒泡排序 选择排序 插入排序
  • [Angular 基础] - 数据绑定(databinding)