zoukankan      html  css  js  c++  java
  • 原型模式故事链--new一个对象的过程

    上一个总标题https://segmentfault.com/a/11...
    提问:你有对象了吗?
    :没有。
    笨!new一个不就好了吗!

    问题点:为什么我要理解new一个对象的过程?
    答:不理解这个过程,你就不知道为什么只是new了一下,这个实例就能使用原型的各种方法。

    new一个对象的过程:需要经历4个步骤,结合上一章原型模式为例。
    var cat = new Animal('橘猫');

    1.创建一个新的空对象。
    var cat = {}

    2.设置新的对象的隐式原型指向其构造函数的显式原型
    cat._proto_ = Animal.protype

    3.执行构造函数代码,this指向这个新的对象。
    Animal.call(cat)

    4.返回该对象(返回this)
    var cat = new Animal();
    (把返回的对象保存到变量cat中,所以这个cat就是这个对象的实例,所以cat本身也是一个对象)

    好啦,你有一个对象了。你脱单了。
    如果还是比较难以理解那我通俗点的讲:
    原先的代码长这个样子。

        //构造函数
        function Animal(name){
            this.name = name;
            //为什么在原型里的方法放到构造函数里呢,因为2.设置新的对象的隐式原型指向其构造函数的显式原型
            this.eat = function(val){
                console.log(this.name + ' like eat '+ val);
            }
        }

    使用了new操作符后就变成了这样。

        //构造函数
        function Animal(name){
            //1.创建一个空的对象(为了方便理解我们让这个对象就叫this)
            var this = {};
            
            //3.执行构造函数代码,往this里添加属性和方法。
            this.name = name;
            this.eat = function(val){
                console.log(this.name + ' like eat '+ val);
            }
            
            //4.返回该对象(返回this)
            return this;
        }

    所以当我们 var cat = new Animal('橘猫');
    就相当于 var cat = this; //this里面的方法属性cat都可以用。

    验证:我们去验证一下,是否做了以上这几件事。
    验证步骤2:
    在控制台输出一下日志:
    图片描述

    由上图可以看到,cat._proto_和 Animal.protype是完全相等的。说明2成立。

    验证一下步骤3和4:

    //构造函数
        function Animal(name){
            this.name = name;
            console.log('this:',this)
        }
        
        // 原型
        Animal.prototype = {
            eat:function(val){
                console.log(this.name + ' like eat '+ val);
            }
        }
        
        Animal();//window

    由上面可以看出,没有实例化时(没有new时),this指向的是window.
    那么来看看new后this是否会指向这个新对象。

    //构造函数
        function Animal(name){
            this.name = name;
            console.log('this:',this)
        }
        
        // 原型
        Animal.prototype = {
            eat:function(val){
                console.log(this.name + ' like eat '+ val);
            }
        }
    
        // 实例化
        var cat = new Animal('橘猫');
    
        console.log('cat就是:',cat)

    控制台输出日志如下:
    图片描述

    两者完全相同,由此我们可以验证步骤3和4成立。执行了构造函数且this指向这个新对象。

    问题:隐式原型和显式原型是什么?为什么cat能调用显式原型里的东西?
    下一回:原型链 https://segmentfault.com/a/11...

  • 相关阅读:
    sql2slack alash3al 开源的又个轻量级工具
    pgspider fetchq 扩展docker镜像
    godns 集成coredns 的demo
    godns 简单dnsmasq 的dns 替换方案
    aviary.sh 一个基于bash的分布式配置管理工具
    使用coredns 的template plugin实现一个xip 服务
    nginx 代理 coredns dns 服务
    基于nginx proxy dns server
    几个不错的geodns server
    spring boot rest api 最好添加servlet.context-path
  • 原文地址:https://www.cnblogs.com/10manongit/p/12748678.html
Copyright © 2011-2022 走看看