javascript --- Object.create的阅读
说明
- 今天阅读koa源码时,遇到
Object.create
,感觉对这个概念有点生疏,于是打开了MDN进行重新梳理 - 传送门
Object.create()
- 直接套用官网的栗子
const person = {isHuman: false,printIntroduction: function () {console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);}
}
const me = Object.create(person);
console.log(me);
- 上面解释了
创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
- 即做了2件事:
- 创建一个新对象.
- 把原对象的属性和方法放在新对象的__proto__属性中
好处
- 个人认为.解决了对象赋值的浅拷贝问题
- 由于javascript的对象类型是引用类型(《JavaScript高级程序设计》(第三版)),如果使用正常的赋值法,如下:
const me = person;
me.isHuman = true;
console.log(person.isHuman);
可以看到,我们对me的操作,直接影响到person了.
使用Object.create来实现类式继承
- 先找到javascript中,类的继承究竟做了哪些事情
- 假设现在有类Shape如下:
class Shape {constructor(x, y) {this.x = 0;this.y = 0;}moved(x, y){this.x += x;this.y += y;console.log('Shape moved');}
}
- 假设类Rectangle继承Shape
class Rectangle extends Shape{constructor(x, y){super();}
}
const rect = new Rectangle();
const shape = new Shape();
console.log('rect', rect);
console.log('shape', shape);
- 将他们打印出来,查看继承到底做了些什么事情
- 可以看到:
- Rectangle调用了Shape的constructor函数
- Rectangle原型的原型继承了Shape的原型
- 先实现Shape类
function Shape (x, y) {this.x = 0;this.y = 0;
}
Shape.prototype.moved = function (x, y){this.x += x;ths.y += y;console.log('Shape moved');
}
const shape = new Shape();
console.log('shape', shape);
- 在Rectangle类中调用Shape并将作用域绑定到当前作用域,即可实现
this.x =0; this.y = y
function Rectangle (x, y) {Shape.apply(this);
}
const rect = new Rectangle();
console.log('rect');
现在有2个点没有解决:
3. Rectangle沿着原型链的构造函数找不到Shape
4. moved方法没有继承
想到Object.create方法,是创建一个新对象,并把该对象的属性和方法都挂在__proto__
属性上,有如下继承方案:
Rectangle.prototype = Object.create(Shape.prototype);
const rect = new Rectangle();
console.log('rect', rect);
可以看到,基本上继承成功了,只是Rectangle的构造函数(constructor)丢了.只需要重新带上即可
Rectangle.prototpe.constructor = Rectangle;
总结
- 如果想要某个对象继承另外一个对象所有的属性和方法,且新对象的操作不会影响到原来的对象.可以使用Object.create方式赋值.
- 当在某个对象上找不到方法是,会顺着原型链(prototype, 浏览器显示为
__proto__
)逐级寻找.
javascript --- Object.create的阅读相关推荐
- JavaScript ES5之Object.create函数详解
介绍 在创建对象的时候,我们有2种常用方法 一个是文本标记法(var obj = {}),一种是运用Object函数进行对象的创建(new Object()). 但是这两种方式并不是创建的一个完完全全 ...
- javascript一种新的对象创建方式-Object.create()
1.Object.create() 是什么? Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不 ...
- JavaScript新的对象创建方式---Object.create()
Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式, 第一个参数是要继承的原型,如果不是一个子函数,可以传一个null, 第二个参 ...
- JavaScript的Object.create()方法
JavaScript的Object.create()方法 ES5定义了一个名为Object.create()的方法,它创建一个对象,其中第一个参数就是这个对象的原型,Object.create()提供 ...
- object.create()
语法: Object.create(proto, [propertiesObject]) //方法创建一个新对象,使用现有的对象来提供新创建的对象的proto. 参数: proto : 必须.表示新建 ...
- 关于Object.create()与原型链的面试题?
原文地址 https://segmentfault.com/q/1010000004670616?utm_source=weekly&utm_medium=email&utm_camp ...
- Object.create(..)和new(..)的内部实现
Object.create() 经常会有这样的疑问?Object.create()到底做了什么工作? 像这样两行代码有什么不同? var obj ={a: 1} var b = obj var c = ...
- js-new、object.create、bind的模拟实现【转载备忘】
//创建Person构造函数,参数为name,age function Person(name,age){this.name = name;this.age = age; }function _new ...
- JavaScript Object对象
原文:JavaScript Object对象 Object对象 1. 介绍 Object对象,是所有JavaScript对象的超类(基类).Object.prototype(Obecjt的原型)定义了 ...
最新文章
- 软件测试用例优秀例子_功能测试用例设计方法分享
- html5 can,微软想要从HTML5中分离Can
- mysql create database to_mysql之CREATE DATABASE Syntax(创建数据库)
- 【C语言】找出1000以内的水仙花数
- 企业职工能实行弹性退休吗?
- mybatis 业务逻辑
- (ICIP2019)图像语义分割(23) LEDNet-用于实时语义分割的轻量级编解码网络
- zendframework Form表单美化
- python更换证件照背景
- python脚本画pie饼图_小白学Python(11)——pyecharts,绘制饼图 Pie
- easyUI之新增,下架以及上架
- ie剪切增强版工具---自由填表工具filltable
- DMA导致的CACHE一致性问题解决方案
- python编程选股_python编写选股公式
- [BZOJ4372][烁烁的游戏][动态树分治+线段树+LCA]
- Unity与安卓交互 | Unity2019.3版本之后,在Android Studio中写代码导出aar包与Unity中使用交互的方法
- python - windows 之 SetCursorPOS与GetCursorPos操控鼠标
- 神经网络中的梯度是什么,神经网络梯度公式推导
- Spring AOP 报错 Exception encountered during context initialization - cancelling refresh attempt[已解决]
- 10款老式英文复古字体
热门文章
- c语言grade d10,《电子技术10级C语言课程设计报告书写规范》.doc
- python 发送邮件不显示附件_python3发送邮件(无附件)
- 双亲委派机制_面试官:双亲委派机制的原理和作用是什么?
- drbd实现mysql地热备_heartheartbeat+drbd+mysql主库热备
- 搜狗输入法在idea打不了汉字_IDEA开发软件在linux环境下使用搜狗输入法无法进行中文输入...
- 2020亚太杯数学建模_比赛 | 2020年APMCM亚太地区大学生数学建模竞赛
- 在线课程学习、科研科技视频网站
- caffe cifar10试跑问题总结
- Behave用户自定义数据类型
- 跨线程取出控件的值的写法(不是跨线程赋予控件值)