【JavaScript】原型与原型链
1. 原型模式
每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。实际上,这个prototype对象就是通过调用构造函数创建的对象的原型,使用原型对象的好处是,在它上面定义的属性和方法可以被所有实例对象共享。原来在构造函数中直接赋值给对象实例的值,可以直接赋值给它们的原型,如下所示:
function Person(){}
Person.prototype.name = "CODER-V";
Person.prototype.age = 18;
Person.prototype.sayName() = function(){
console.log(this.name);
};
let p1 = new Person();
p1.sayName()// CODER-V
let p2 = new Person();
p2.sayName()// CODER-V
这里,所有属性和方法都直接添加到了Person的prototype属性上,构造函数体中什么也没有。但这样定义之后,实例任然可以拥有相应的属性和方法,要理解这个过程就必须理解ECMAScript中方原型的本质。
2. 理解原型
无论何时,只要创建一个函数,就会按照特定的规则为这个函数创建一个prototype属性(指向原型对象)。默认情况下,所有原型对象都会自动获得一个名为constructor的属性,指回与之关联的构造函数。
在自定义构造函数时,原型对象默认只会获得constructor属性,其他方法都继承自Object。每次调用构造函数创建一个新的实例,这个实例内部的[[prototype]]指针就会被赋值为构造函数的原型对象。JavaScript中没有访问这个[[prototype]]特性的标准方式,但Firefox、Safari、Chrome会在每个对象上暴露_proto_属性,通过这个属性可以访问对象的原型。在其他实现中,这个特性完全被隐藏了。关键在于理解这一点:实例与构造函数原型之间有直接的联系,但实例与构造函数之间没有。
虽然不是所有实现都对外暴露了[[prototype]],但是可以使用isPrototypeOf()方法,确定两个对象是否共享一个原型(其实这个原型就是一个隐藏类,对隐藏类不了解的可以看一下我的另一篇文章:垃圾回收与内存管理 4.3节),本质上,isPrototypeOf()会在传入参数的[[prototype]]指向调用它的对象时,返回true,即:
Persion.prototype.isPrototypeOf(Person1); //true
ECMAScript的Object类型有一个方法叫Object.getPrototypeOf(),返回参数内部特性[[prototype]]的值,即:
Persion.getPrototypeOf(Person1) == Persion.prototype; //true
Persion.getPrototypeOf(Person1).name; //CODER-V
使用Object.getPrototypeOf()可以方便的获取一个对象的原型,而这在通过与原型实现继承时显得尤为重要(本章后面会介绍)。
Object类型还有一个setPrototypeOf()方法,可以向实例的私有特性写入一个新值。这样就可以重写一个对象的原型继承关系:
let biped = { numLegs: 2 };
let person = { name: "CODER-V" };
Object.setPrototypeOf(person,biped);
console.log(person.biped);// 2,通过Object.setPrototypeOf为person的原型对象写入了新的值
但是不推荐这样做,因为修改了原型会间接修改了继承关系,这种影响是微妙且深远的,会影响所有继承了这个原型的实例对象。为了避免使用setPrototypeOf()造成的性能下降,可以通过Object.create()来创建一个新的对象,同时为其指定原型:
let biped = { numLegs: 2 };
let person = Object.create(biped);
person.name = "CODER-V";
/**
* person={
* numLegs: 2;
* name: "CODER-V"
* }
*/
3. 原型层级
4. 原型和in操作符
相关文章
- JavaScript进阶-04
- JavaScript高级(3) 原型链 (懵逼
- 【说站】javascript instanceof的原型介绍
- 【说站】javascript原型对象如何理解
- 「数据结构与算法Javascript描述」二叉树
- 【JavaScript】this对象
- WebStorm 2023 for Mac 永久激活版: 最强大的JavaScript集成开发环境
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- js、javascript操作json总结详解编程语言
- JavaScript语言基础-变量声明var和let和const(ES6特性)详解编程语言
- javascript判断碰撞检测详解编程语言
- 飞鱼(shqlsl)javascript作品集
- JavaScript使用prototype定义对象类型(转)[
- 仿豆瓣分页原型(Javascript版)
- 写入cookie的JavaScript代码库cookieLibrary.js
- JavaScript通过attachEvent和detachEvent方法处理带参数的函数
- javascript用原型继承来实现对象系统
- JavaScript为对象原型prototype添加属性的两种方式
- JavaScript原型学习总结
- JavaScript原型链学习总结
- JavaScript原型继承之基础机制分析
- javascript当中的代码嗅探扩展原生对象和原型(prototype)
- JavaScript的模块化:封装(闭包),继承(原型)介绍
- javascript中对Attr(dom中属性)的操作示例讲解
- javascript中的self和this用法小结
- javascript作用域和闭包使用详解