【JS】原生JS以对象作为构造器创建实例Object.create()

本是古典何须时尚 2022-05-27 04:37 133阅读 0赞

> 使用对象字面量作为其他对象的基础  
> 创建Person对象 具有下列属性

var Person = {
     	firstName : 'quanquan',
     	lastName : 'xu',
     	birthDate : new Date('1992-01-04'),
     	gender : 'female',
     	getAge : function(){
     		var today = new Date();
     		var diff = today.getTime() - this.birthDate.getTime();
     		console.log( diff )
     		var year = 1000*60*60*24*365.25;
     		return Math.floor(diff/year);
     	},
     	toString : function(){
     		return this.firstName + ' ' + this.lastName + ' is a ' + this.getAge() + ' year-old ' + this.gender;
     	}
     }

> 创建Person的类型的实例  
> ES6 Object.create 提供对象间联系的方法  
> 修改原型中的一些属性 未修改的则继承Person

var yuan = Object.create( Person );
    
     console.log( yuan.__proto__ );//查看yuan的原型Person
     console.log( yuan.__proto__ === Person);//true
    
     yuan.firstName = 'yuanyuan';//修改firstName
     yuan.lastName = 'hu';//修改lastName
     yuan.birthDate = new Date('1990-10-25');//修改birthDate
    
     console.log( yuan.toString() );//yuanyuan hu is a 27 year-old female

> 当ES6 不支持Object.create时可以使用一下方法创建实例  
> 构造函数的方式

if( typeof Object.create != 'function' ){
     	Object.create = function( o ){
     		function F(){}
     		F.prototype = o;
     		return new F();
     	}
     }

> 当你不喜欢使用Object.create时 可以使用工厂方法

var Animal = {
     	type : 'pig',
     	age : '3',
     	gender : 'female',
     	showInfo : function(){
     		return this.type + ' ' + this.age + this.gender;
     	},
     	extend : function(config){
     		var tmp = Object.create( this );
     		for( var key in config ){
     			if( config.hasOwnProperty( key ) ){
     				tmp[ key ] = config[ key ];
     			}
     			
     		}
     		return tmp;
     	}
    
     }
     //dog继承Animal
     var Dog = Animal.extend({
     	type : 'dog',
     	age : '4',
     	showInfo : function(){
     		return 'this dog' + this.type + this.age;
     	}
     });
     //cat继承Dog 但拥有Animal的属性
     //如果Dog的属性与Animal的属性冲突 那么继承的是Dog的属性
     var cat = Dog.extend({
     	type : 'cat',
     	age : '5'
     });
     console.log(Dog.showInfo());//this dogdog4
     console.log(cat.__proto__);//Dog
     console.log(Dog.__proto__);//Animal
     console.log( cat.showInfo() );//this dogcat5

> 判断Dog的原型是否是Animal isPrototypeOf

console.log( Animal.isPrototypeOf( Dog ) );//true
     console.log( Dog.isPrototypeOf( Animal ) );//false

> 返回当前对象的原型 getPrototypeOf

console.log( Object.getPrototypeOf(cat) );//Animal

参考书籍：《精通javascript》(第二版) 第三章

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 js中工厂函数和构造函数创建对象

工厂函数： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

野性酷女/ 2023年03月02日 13:27/ 0 赞/ 101 阅读

相关 JS原生Ajax(XMLHttpRequest对象)

Ajax 用途：主要是引用于异步交互，当使用Ajax模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)整个页面。这使得HTML页面能成更快速

小鱼儿/ 2022年12月04日 01:22/ 0 赞/ 130 阅读

相关 js 创建对象

js创建对象方式：第一种模式：工厂方式 var lev=function(){ return "啊打";

桃扇骨/ 2022年08月20日 04:21/ 0 赞/ 198 阅读

相关 JS 基础 —— Function 构造器及其对象、方法

一、基础 Function 是一个构造器，能创建Function对象，即JavaScript中每个函数实际上都是Function 对象。构造方法： new Fu

怼烎@/ 2022年07月16日 09:50/ 0 赞/ 200 阅读

相关 js创建对象

JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。当我们用`obj.xxx`访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如

港控/mmm°/ 2022年07月13日 00:20/ 0 赞/ 190 阅读

相关 js创建对象

<script language="javascript"> //1、无参函数new出来 function Car()\{ var ōcar = new

分手后的思念是犯贱/ 2022年06月12日 11:16/ 0 赞/ 183 阅读

相关【JS】原生JS以对象作为构造器创建实例Object.create()

> 使用对象字面量作为其他对象的基础 > 创建Person对象具有下列属性 var Person = { firstName : 'quanquan

本是古典何须时尚/ 2022年05月27日 04:37/ 0 赞/ 134 阅读

相关 JS创建对象

JS创建对象的方法有两种：１．通过原生形式创建对象(对象字面量表示法) var iphone9 = { color: 'yello

男娘i/ 2022年05月18日 09:20/ 0 赞/ 231 阅读

相关 js 创建对象

`javascript`创建 `对象`相对比较简单，代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"

拼搏现实的明天。/ 2022年05月13日 07:28/ 0 赞/ 211 阅读

相关 js_高级_对象、面向对象、构造函数、实例对象、原型、原型链

1、什么是对象　　汽车不是对象是是一类事物，一辆汽车是对象。　　![1151059-20190527142943723-130215789.png][] 　　![11

ゞ浴缸里的玫瑰/ 2021年12月22日 22:15/ 0 赞/ 392 阅读