Object.create()分析及实现基础指南_object小白基础

Object.create()方法的作用:创建一个新对象,使用现有的对象来提供新创建的对象的__proto__(会返回一个新对象,带着指定的原型对象和属性)。分析默认情况下,js中对象的隐式原型__proto__指向其构造函数的显示原型prototype(这里的指向可以理解为属性与值的关系)// 字面量创建对象
let obj1 = {}
obj1.__pr

Object.create()分析及实现基础指南

Object.create()方法的作用:创建一个新对象,使用现有的对象来提供新创建的对象的__proto__(会返回一个新对象,带着指定的原型对象和属性)。

Object.create()分析及实现基础指南_object小白基础

分析

默认情况下,js中对象的隐式原型__proto__指向其构造函数的显示原型prototype(这里的指向可以理解为属性与值的关系)

// 字面量创建对象
let obj1 = {}
obj1.__proto__ === Object.prototype; // true

// 内置构造函数创建对象。等价于new Object();
let obj2 = Object();
obj2.__proto__ === Object.prototype; // true

// 自定义构造函数创建实例对象
let Ctr = function(){};
let obj3 = new Ctr();
obj3.__proto__ === Ctr.prototype; // true

Object.create()分析及实现基础指南_object小白基础

而经过Object.create()方法创建的对象可以指定其隐式原型为一个函数或者对象。

// 首先自定义一个构造函数并初始化一个实例对象。
function Base(){
    this.name = 'cuixiaodao'
}
Base.prototype.say = function (){
    console.log(`1:`,1);
}

var base = new Base();


// 创建新对象,指定其隐式原型为Base
var o1 = Object.create(Base);
o1.__proto__ === Base; // true

// 创建新对象,指定其隐式原型为base
var o2 = Object.create(base);
o2.__proto__ === base; // true

如图:

Object.create()分析及实现基础指南_object小白基础

可以看出,Object.create方法的主要逻辑:创建一个对象,手动设置其隐式原型__proto__属性为传入的参数,让后将这个对象返回。

这样看实现过程就比较简单了。不过Object.create()方法还可以接受第二个参数,用来给新创建的对象添加可枚举属性,与Object.defineProperies方法第二个参数用法一样。

实现

这里我们本着弄清Object.create方法主要过程的原则,暂时不考虑第二个参数,对其主要功能做简单实现。

function _create(paramProto){
     var isObject = (typeof paramProto === 'object') || (typeof paramProto === 'function');
     var isUndefined = typeof paramProto === 'undefined';
     if (isUndefined || !isObject){
         throw new TypeError('Object prototype may only be an Object or null: ' + paramProto)
     }
     
     function F() { }
     F.prototype = paramProto;
     return new F();
}

上面最后三行代码,返回了F的实例对象,暂且称为f,那么也就是f.__proto__ === F.prototype,而F.prototype = paramProto,也就做到了f.__proto__ === paramProto。

也可以理解为下面的形式

function _create(paramProto) {
    return {
        __proto__: paramProto
    }
}

唠叨一下

Object.create()参数为对象和函数的区别

自定义一个构造函数并且实例化,分别用1Object.create()创建o1、o2另个对象。


function Base() {
    this.name = 'cuixiaodao'
}
Base.age = '18';
Base.prototype.say = function () {
    console.log(`1:`, 1);
}

let base = new Base();

let o1 = Object.create(Base);
var o2 = Object.create(base);
console.log(`o1:`,o1);
console.log(`o2:`,o2);

Object.create()分析及实现基础指南_object小白基础

可以看到o1的隐式原型是Base,而o2隐式原型是baese

o1.__proto__ === Base; // true
o2.__proto__ === base; // true

Object.create()分析及实现基础指南_object小白基础

o2可以访问到base上的name属性及base通过__proto__继承来的say方法。

o2.name;  // cuixiaodao
o2.say(); // 1

但是o1都访问不到

o1.name;  // 'Base'
o1.say;  // undefined

主要是因为原型链继承是通过对象的__proto__属性实现的:访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条链向上找,这就是原型链。虽然o1.__proto__ === Base,但由于say方法是定义在Base原型上的,通过o1.__proto__并访问不到,所以是undefined。直接在Base上面定义属性,o1是可以访问到的。

o1.age; // 18

Object.crete(null)和{}

Object.crete(null)会返回一个纯净的对象,不会继承内置Object的toString、valueof等方法。

Object.create()分析及实现基础指南_object小白基础

海计划公众号
(0)
上一篇 2020/03/24 05:42
下一篇 2020/03/24 05:42

您可能感兴趣的内容

  • 程序员年龄大了怎么办?程序员年龄大了的出路小白指南_程序员入门基础

    在很多人的眼里,程序员都是吃青春饭的。尤其是国内更是这样认为,程序员年龄大了,体力越来越差,就不好找工作了,开始担心以后的出路。那么未来大龄程序员的出路在哪呢?还要不要继续从事编程工作呢?现在很多人选择一个行业都会考虑它的前景,需要不那么早的就被行业所淘汰。就编程这一行业而言,从业者的年龄是逐步年轻化,部分公司还会有年龄的限制,对于新的知识也是瞬息万变,需要

    2020/04/03
  • 响应式网站的内容设计菜鸟教程下载_响应式菜鸟攻略

    基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容。 1 响应式图片显示内容设计真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片,我们可以准备多张不同尺寸的图片,然后在各自的媒体查询样式中使用对应的图片背景。再结合min-wi

    2020/03/24
  • Omi菜鸟指南_开放现代的Web组件化框架

    Omi菜鸟指南 官方网址:http://omijs.org GitHub:https://github.com/Tencent/omi 简介描述:开放现代的Web组件化框架 由腾讯…

    2020/03/06
  • clamp.js使用攻略_在HTML元素内容过长时在后面添加省略标志

    clamp.js使用攻略 官方网址:http://joe.sh/clamp-js GitHub:https://github.com/josephschmitt/Clamp.js …

    2020/03/06
  • Flutter官方WebView使用零基础入门_webview小白知识

    使用过人气很高的flutter_webview_plugin,但是缺少2个重要的功能。也在打开多个WebView时会出错。不能在JS中调用Flutter方法不能在H5进入某个URL之前拦截虽然该插件不够完整,但是使用起来很方便,封装了很多功能。如果交互不多可以用该插件。官方的 webview_flutter之后使用官方的webview_flutter插件。附

    2020/03/29
  • React Native之启动流程小白知识_流程小白常识

    JS 程序的入口,将当前 APP 对象注册到 AppRegistry 组件中, AppRegistry 组件是 js moduleimport { AppRegistry } from ‘react-native’…省略代码AppRegistry.registerComponent(‘demo’, () => Index)启动流程我们新建一个RN的项目,

    2020/03/23
  • artDialog菜鸟攻略经典、优雅的网页对话框控件

    artDialog入门知识 官方网址:http://aui.github.com/artDialog/ GitHub:https://github.com/aui/artDialo…

    2020/03/06
  • CSS position 属性基础入门css中常用position定位属性介绍_布局基础教程

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种:1、static(静态定位):这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。也就是按照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置,不能使用top,botto

    2020/04/05
  • React组件通信入门百科_通信使用帮助

    前言这篇文章将还是通过实例的方式记录一下 React 中组件之间的通信方式,在 React 中,需要组件通信的情况一般有以下几种:父组件向子组件通信子组件向父组件通信跨级组件通信非嵌套组件通信父组件向子组件通信React 中采用数据单向流动的方式,父组件向子组件传递数据也是很常见的情况,父组件通过 props 向子组件传递数据// 父组件
    class App

    2020/03/26
  • YeeLogo使用指南_在线简单LOGO制作工具

    YeeLogo使用指南 官方网址:http://yeelogo.com/ 简介描述:在线简单LOGO制作工具 “Yee Logo”是一个简单易用的免费logo在线制作平台,只需两分…

    2020/03/11
  • 想要成为一个优秀的WEB前端工程,到底该怎么做呢?新手入门_前端使用说明

    互联网已成为当下最火热的行业,互联网的发展带来了巨大的社会变革,从工作到生活,改变着方方面面。 随着互联网的快速发展,IT技术人才缺口开始出现并不断扩大。WEB前端开发工程师作为IT领域中的最热门岗位之一,对人才的需求量更加惊人。想要成为一个优秀的WEB前端工程,到底该怎么做呢?必要因素学成WEB前端的必要因素,一样都不可以少: 1.自主学习的能力,自

    2020/03/23
  • js调用函数的几种方法基础入门ES5/ES6的函数调用方式_函数小白知识

    这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关一、ES5函数调用模式包括函数名()和匿名函数调用,this指向window function getSum() {console.log(this) //window}getSum()(

    2020/04/05
  • ajax提交 使用css 控制按钮防止重复点击小白帮助_ajax基础知识入门

    有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果.原理很简单1.判断有没有这个类,有说明重复点击 返回false if(obj.hasClass(‘submitting’))return false;2.添加类 obj.addCla

    2020/03/30
  • Js语句后加不加分号;入门指南_语句菜鸟教程下载

    问题前一阵子猛然想到一个问题,JS有分号自动补全(ASI)机制,在写JS时我是习惯性在语句后面加上分号,在块语句后面不加分号。那么如果没有加分号的话,在什么情况下会出现问题?在JS语句后到底是应该加分号还是不加分号?解决问题面对这个问题,我来了兴趣。于是在网上查了一些资料。关于加不加分号的问题,知乎上一些回答这个问题的大佬普遍意见是,喜欢就好。嗯,很直接。关

    2020/03/29
  • 不定高度的元素实现transition动画使用攻略如何为height:auto的div添加css3过渡动画_css3动画入门百科

    一个元素不设置高度时,height的默认值是 auto,浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 CSS3动画呢?在MDN文档中CSS 支持动画的属性中的 height 属性如下 :当 height 的值是 length,百分比或 calc() 时支持 CSS3 过渡,所以当元素 height : auto 时,默认是不支

    2020/04/05
  • relay基础指南_基于React的数据驱动框架

    relay基础指南 官方网址:https://facebook.github.io/relay/ GitHub:https://github.com/facebook/relay …

    2020/03/06