原型模式故事链--new一个对象的过程

喜儿
• 阅读 1566

上一个总标题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:
在控制台输出一下日志:
原型模式故事链--new一个对象的过程

由上图可以看到,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)

控制台输出日志如下:
原型模式故事链--new一个对象的过程

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
4年前
java 复制Map对象(深拷贝与浅拷贝)
java复制Map对象(深拷贝与浅拷贝)CreationTime2018年6月4日10点00分Author:Marydon1.深拷贝与浅拷贝  浅拷贝:只复制对象的引用,两个引用仍然指向同一个对象
qchen qchen
3年前
Java中6种创建对象的方式
1、使用关键字new创建对象java//无参构造Testtest1newTest();//有参构造Testtest2newTest("小明",18);new对象过程中,底层发生了什么?1.类加载JVM检查先是否已经加载,没有则执行类加载过程2.声明类型引用声明一个Test类型的引用test3.堆内存分配类加载步骤中已确定对象所需
希望的天 希望的天
4年前
轻松搞定构造函数,new,实例对象,原型,原型链,ES6中的类
本文主要是之前我的《一文搞懂JS系列》的后续,至于为什么标题变了,因为标题字数写不下,对于JS基础感兴趣的可以看看我之前写的系列。标题变初心不变,接下来开始今天的内容。前言本文主要讲的就是函数,方法,构造函数,new操作符,实例对象,原型,原型链,ES6类。因为这几个知识点都是有互通的关系的,所以一起讲,方便大家疏通整个关于这方面
半臻 半臻
4年前
Python基础7——单例模式
15单例模式15.1init和new方法执行步骤1.实例化一个对象,先执行new方法,在new方法中返回对象2.然后再调用init方法15.1.1\\init\\方法init是构造方法<fontcolor"red"其实最先调用的方法是new方法</font,但是大部分情况下是不使用new方法pythonclassTest(object):
九路 九路
5年前
2 Java对象的创建过程
JAVA中创建对象直接new创建一个对象,对么对象的创建过程是怎样的呢?程序运行过程中有许多的对象被创建出来.那么对象是如何创建的呢?一对象创建的步骤1遇到new指令时,检查这个指令的参数是否能在常量池中找到一个符号引用2如果找到符号引用,就检查这个符号引用是否已经被加载,解析和初始化过3如果没有加载过,则执行类加载过程
Stella981 Stella981
4年前
JavaScript的 基本数据类型
第一:Javascript对象是第二:Javascript中第三:Javascript的对象是数据;第四:JavaScript中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个JavaScript字符串参考https://www
Wesley13 Wesley13
4年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
Wesley13 Wesley13
4年前
Java原型模式
原型模式  原型模式也称克隆模式。原型模式jianmingzhiyi,就是先创造出一个原型,然后通过类似于Java中的clone方法,对对象的拷贝,克隆类似于new,但是不同于new。new创造出来的对象采用的是默认值。克隆出来的对象与原型对象相同,同时不会影响原型对象,然后在修改克隆出来的对象。实现  继承Cloneable接口,重写cl