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

本是古典何须时尚 2022-05-27 04:37 145阅读 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 条评论，145人围观）

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

相关阅读

相关 js以变量作为函数名

迎大家一起交流学习n(\*≧▽≦\*)n 1.不传入参数 let fun = "test"; eval(fun+"()"); ...

「爱情、让人受尽委屈。」/ 2024年04月18日 17:16/ 0 赞/ 79 阅读

相关 js以变量作为对象的键名

let name1 = 'name'; let data = { name: "张三", age: 20

- 日理万妓/ 2023年06月08日 06:53/ 0 赞/ 12 阅读

相关 JS原生Ajax(XMLHttpRequest对象)

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

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

相关 js 创建对象

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

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

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

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

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

相关 js创建对象

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

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

相关 js创建对象

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

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

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

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

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

相关 JS创建对象

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

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

相关 js 创建对象

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

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