review javascript 10:javascript原型

(1)知识点

  • (1.1)prototype的定义
  • (1.2)prototype的好处
  • (1.2)prototype使用注意点

(2)细化

(2.1)prototype的定义

(1)定义出来对象是有prototype的
(2)new出来的对象,是没有prototype的
(3)prototype是一个对象,它有一个构造函数(constructor),这个构造函数就是它本身

(2.2)prototype的好处

(1)在前端的世界里,我们也希望可以通过面向对象的方式去编程,所以我们可以用prototype来创建对象的属性和方法
补充一句:
(A)就是我们的业务场景是和对象紧密关联的
(B)更好和后端系统协作
(C)因为json串更好的支撑面向对象,所以也经常用json这个格式来传输数据
(2)我们可以通过给原型添加属性和方法来给给对象添加属性或方法!

(2.3)prototype的使用注意点:

我们基于prototype去新增的属性和方法是不能覆盖原来对象内部的属性或者方法
(1.1)默认调用的是函数对象本身的属性或方法.
(1.2)通过原型增加的属性或方法的确是存在的.
(1.3)函数对象本身的属性或方法的优先级要高于原型的属性或方法.


(3)实践

<script type="text/javascript">
    init();

    function init() {
        learnPrototype();
        //learnProtoTypeCover();
    }

    //学习原型属性覆盖
    function learnProtoTypeCover() {
        var hzq = new Person();
        alert(hzq.name);
        hzq.sayHello();

        //我们定义的对象,才有prototype
        Person.prototype.name = 'zhujinlin';
        Person.prototype.sayHello2 = function () {
            alert('say zhujinlin');
        }

        alert(hzq.name);
        hzq.sayHello2();

    }

    function Person() {
        this.name = 'haozhongqing';
        this.sayHello = function () {
            alert('hello,haozhongqing');
        }
    }


    function learnPrototype() {
        var waixingrenSbd = new shubiaodian(40, 20, "铝", "外星人");
        waixingrenSbd.create();

        alert(waixingrenSbd.prototype);//undefined<-----new出来的对象,是没有原型的
        alert(typeof shubiaodian.prototype);//object
        alert(shubiaodian.prototype.constructor);//原型的构造函数就是本身

        shubiaodian.prototype.destory = function () {
            alert("shubiaodian xiaohui");
        }
        shubiaodian.prototype.copy = function () {
            alert(this.pinpai + " 被复制了");
        }

        waixingrenSbd.destory();
        waixingrenSbd.copy();
       
    }

    //这最后一个constructor对象就是我们构造出来的function函数本身
    function shubiaodian(length, width, caizhi, pinpai) {
        //属性
        //TODO:this在js中的含义
        this.length = length;
        this.width = width;
        this.caizhi = caizhi;
        this.pinpai = pinpai;
        this.age = 2;

        //方法
        this.create = function () {
            alert("长度:" + this.length);
            alert("宽度:" + this.width);
            alert("材质:" + this.caizhi);
            alert("品牌:" + this.pinpai);
            alert("使用年限:" + this.age);
            //和后台交互
        }
    }

</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,056评论 19 139
  • 序 从最近的js入门系列的阅读量逐步递减,观众老爷的兴趣也不再能够接受一些细节性的地方深度挖掘,让我有了一些思考。...
    zhaolion阅读 5,542评论 5 19
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 8,089评论 4 14
  • 昨天深夜,Mr.公收到来自一位男生的打call留言,他要告诉推荐的人物是:民谣歌手花粥。
    hllylllyll阅读 1,058评论 0 0

友情链接更多精彩内容