上一个总标题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...

原型模式故事链--new一个对象的过程的更多相关文章

  1. 原型模式故事链(4)--JS执行上下文、变量提升、函数声明

    上一章:JS的数据类型 传送门:https://segmentfault.com/a/11... 好!话不多少,我们就开始吧.对变量提升和函数声明的理解,能让你更清楚容易的理解,为什么你的程序报错了~ ...

  2. 原型模式故事链(3)--JS的数据类型、以及区别、区分、转化

    上一章--原型链讲解:传送门:https://segmentfault.com/a/11... 在上一章讲解原型链时提到了:所有的引用类型都有一个_proto_属性,称之为隐式原型.那么引用类型是什么 ...

  3. 原型模式故事链(5)--JS变量作用域、作用域链、闭包

    上一章 JS执行上下文.变量提升.函数声明 传送门:https://segmentfault.com/a/11... 本次我们主要讲讲变量作用域和闭包变量作用域:顾名思义:变量起作用的范围.变量分为全 ...

  4. 设计模式--原型模式Prototype(创建型)

    一.原型模式 用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象.原型模式实现的关键就是实现Clone函数,还需要实现深拷贝. 二.UML类图 三.例子 //父类 class Resume ...

  5. 六个创建模式之原型模式(Prototype Pattern)

    定义: 使用原型实例指定创建对象的种类,并通过拷贝这个原型的属性创建新的对象. 结构图: Prototype:抽象原型类,声明克隆方法的接口,并是所有原型类的公共父类.在Java中,Object类为该 ...

  6. 深入浅出设计模式——原型模式(Prototype Pattern)

    模式动机在面向对象系统中,使用原型模式来复制一个对象自身,从而克隆出多个与原型对象一模一样的对象.在软件系统中,有些对象的创建过程较为复杂,而且有时候需要频繁创建,原型模式通过给出一个原型对象来指明所 ...

  7. 原型模式(Prototype Pattern)

    用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. 它通过复制一个已经存在的实例来返回新的实例,而不是新建实例.被复制的实例就是我们所称的原型,这个原型是可定制的. 原型模式多用于创建复杂 ...

  8. 《JAVA与模式》之原型模式(转载)

    原型模式其实就是java的拷贝机制 原文出处:http://blog.csdn.net/zhengzhb/article/details/7393528   定义:用原型实例指定创建对象的种类,并通过 ...

  9. Prototype 原型模式 复制 浅拷贝 clone MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

随机推荐

  1. 如何设置计算机IP地址

    今天公司变更网络环境让同学们设置IP地址,我竟然不会,我问了一句IP还能自己设置啊,.low爆了,于是赶紧百度,现总结如下 IP地址的设置一种是静态IP,一种是自动获取IP(之前都是自动获取的吧,而且 ...

  2. js和C# 编码 解码

    C#中对URL编码的方法... 编码:Server.UrlEncode(string) 解码:Server.UrlDecode(string) HttpUtility.UrlEncode(string ...

  3. 使用 Fiddler 进行 iOS 抓包

    使用 Fiddler(下载) 进行 iOS 抓包,具体步骤如下: 安装并配置 Fidder 安装并打开 Fiddler, 点击 Tools -> Fiddler Options 选中 Decrp ...

  4. 微信小程序码生成及canvas绘制

    吐槽:某厂的开发文档写的跟屎一样 1.后台返回accessToken,小程序请求获取小程序码 uni.request({ url: 'https://api.weixin.qq.com/wxa/get ...

  5. 禁用 Windows 共享服务,释放 445 端口

    禁用 Windows 共享服务,释放 445 端口 转载自:https://blog.csdn.net/liu857279611/article/details/71786068   在 Window ...

  6. 11 Java的方法 递归

    6.递归 A方法调用B方法,我们很容易理解! 递归就是:A方法调用A方法!就是自己调用自己 利用递归可以用简单的程序来解决一些复杂的问题. 它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较 ...

  7. 09 Java的方法 方法的重载 命令行传参

    3.方法的重载 重载就是在一个类中,有相同的函数名称,单形参不同的函数. 方法的重载的规则: 方法名称必须相同. 参数列表必须不同(个数不同.或类型不同.参数排序顺序不同等). 方法的返回类型可以相同 ...

  8. BBS项目补充知识(后台文章展示功能)

    BBS项目补充知识 1. 开放 media 文件路径 # 以用户注册页面为例 用户头像文件我们默认时保存在 根路径下的static下的img文件夹 但也可以单独放置在指定路径下 # 根路径下创建 me ...

  9. SpringBoot 中实现跨域的几种方式

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...

  10. springWeb——Servlet

    6.1.Servlet简介 servlet是sun公司开发动态web的一门技术 sum在这些API中提供了一个接口叫做:Servlet.开发的两个步骤: 编写一个类,实现Servlet接口 把开发好的 ...