JavaScript对象原型
一、MDN上的解释(有点抽象)
基于原型的语言?
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。
准确地说,这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上,而非对象实例本身。
使用Javascript中的原型
在javascript中,函数可以有属性。 每个函数都有一个特殊的属性叫作原型(prototype)。
MDN上解释的好抽象,看完之后感觉还是不知道原型是什么。
参考资料:MDN:对象原型
二、JavaScript对象 原型这篇博客上的解释
JavaScript对象
JavaScript对象就是一组数据和功能的集合,除原始类型(string、number、boolean、null、undefined)之外,其余都是对象。 可以通过对象直接量(字面量)、new、和Object.create()(ECMAScript5)来创建对象。
//new
var person = new Object();
person.name = "YuanSong";
person.age = 28;
//对象字面量
var person = {
name : "YuanSong",
age : 28
};
//Object.create()
var person = Object.create({name : "YuanSong",
age : 28});
//{}
var person = {};
person.name = "YuanSong";
person.age = 28;
原型
每一个JavaScript对象(null除外)都有原型,每一个对象都从原型继承属性。
所有通过对象字面量创建的对象都具有同一个原型对象,可以通过Object.prototype获得对原型对象的引用。
var person = {
name : "YuanSong",
age : 28
};
alert(Object.prototype.isPrototypeOf(person)); //true
alert(Object.getPrototypeOf(person)==Object.prototype); //true
通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值。
var dt=new Date();
alert(Date.prototype.isPrototypeOf(dt)); //true
alert(Object.getPrototypeOf(dt)==Date.prototype); //true
function Person(){
}
Person.prototype.name = "YuanSong";
Person.prototype.age = 28;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(Object.getPrototypeOf(person1)==Person.prototype);//true
alert(Object.getPrototypeOf(person1).name);//YuanSong from prototype
person1.name = "YuenSung";
alert(person1.name); //"YuenSung" from instance
alert(person2.name); //"YuanSong" from prototype
对实例对象属性的访问,首先读取实例对象的属性,如果没有在实例上发现该属性,则读取原型的属性,当为实例添加一个属性时,就会屏蔽原型对象中保存的同名属性,阻止访问原型中的那个属性,但不会修改原型的那个属性。
对象具有属性和方法,javascript中Object类型的实例都具有都具有以下属性和方法。
1 constructor:构造函数,保存着用于创建当前对象的函数(对于上面,Object())。
2 hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中是否存在(对于上面,person.hasOwnProperty("name"))。
3 isPrototypeOf(object):用于检查对象是否是传入对象的原型(对于上面,Object.prototype.isPrototypeOf(person))。
4 propertyIsEnumerable(propertyName):用于检查给定的属性能否使用for-in来枚举(对于上面,person.propertyIsEnumerable("name"))。
5 toLocalString():返回对象的字符串表示,与执行环境地区对应。
6 toString():返回对象的字符串表示。
7 valueOf():返回对象的字符串、数值或布尔值表示,通常与toString()方法返回值相同。
8 toJSON():JSON.stringify(person)=>"{\"name\":\"yuansong\",\"age\":28}"
原文地址:JavaScript对象 原型
参考JavaScript原型及原型链这篇文章很简洁清晰的写明了原型以及原型链的概念,一下子就明白了!!!
一、原型
原型是 ECMAScript 实现继承的过程中产生的一个概念。
继承:
java 中:指在已有的一个类基础上创建新类的过程。
ES:指在一个对象的基础上创建新对象的过程。原型指在这过程中作为基础的对象。
二、prototype 属性
每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。
prototype属性的引入
考虑到这一点,Brendan Eich 决定为构造函数设置一个 prototype 属性。
这个属性包含一个对象(以下简称” prototype 对象”),所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。
三、原型链
讲原型一个不可避免的概念就是原型链,原型链是通过前面两种创建原型的方式 Object.create() 或 DOG.prototype 时生成的一个 _proto_ 指针来实现的。
总结一下原型链作用:对象属性的访问修改和删除。
- 访问。优先在对象本身查找,没有则顺着原型链向上查找
- 修改。只能修改跟删除自身属性,不会影响到原型链上的其他对象。
四、总结
由于所有的实例对象共享同一个 prototype 对象,那么从外界看起来,prototype 对象就好像是实例对象的原型,而实例对象则好像”继承”了 prototype 对象一样。
JavaScript对象原型的更多相关文章
- 25 JavaScript对象原型&ES5新的对象方法
JavaScript对象原型 所有JavaScript对象都从原型继承对象和方法 日期对象继承自Date.prototype,数组继承自Array.prototype,对象构造器新建的对象Person ...
- JavaScript对象原型写法区别
体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...
- JavaScript对象原型写法详解
体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...
- JavaScript对象 原型
javascript对象就是一组数据和功能的集合,除原始类型(string.number.boolean.null.undefined)之外,其余都是对象. 可以通过对象直接量(字面量).new.和O ...
- JavaScript对象原型链的学习
1.构造函数和原型 1.1对象的三种创建方式 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(nam ...
- JavaScript对象——原型与原型链
原型与原型链 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...
- 理解 JavaScript 对象原型、原型链如何工作、如何向 prototype 属性添加新的方法。
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...
- 再访JavaScript对象(原型链和闭包)
一:原型链简介 JavaScript通常被描述为基于原型的语言 (从继承机制的角度)- 为了提供继承,对象(注意:区别于实例)可以拥有一个原型对象,它充当一个模板对象,它继承了方法和属性.对象的原型对 ...
- 🍓JavaScript 对象原型链继承的弊端 🍓
随机推荐
- 【图像处理】H.264有四种画质级别
H.264有四种画质级别,分别是BP.EP.MP.HP,想要说明H.264 HP与H.264 MP的区别就要讲到H.264的技术发展了 H.264 视频编码技术在视频采集.后期制作等网络视频服务领域的 ...
- Spring Boot 面试总结(一)
1.使用 Spring Boot 前景? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问https://spring.io/projects页面,我们就会看到可以在我们的应用程序中使用 ...
- 小白简单快速搭建lnmp环境(centos7)
本来想着自己搭建lnmp,由于php包下载不下来因此这次本人使用的lnmp一键包搭建的环境(很遗憾还没有php7.3.5)很详细并且方便快捷网址https://lnmp.org/install.htm ...
- 快速开启关闭mysql,批命令方便!
很多python开发人员和我一样,都会在自己的电脑上配置一个python开发的环境,便于开发和学习使用,比如我现在电脑上使用的就是mysql数据库,而我的电脑配置又比较低,电脑运行起来会出现卡慢的情况 ...
- Hystrix服务容错保护
一.什么是灾难性雪崩效应? 造成灾难性雪崩效应的原因,可以简单归结为下述三种: 服务提供者不可用.如:硬件故障.程序BUG.缓存击穿.并发请求量过大等. 重试加大流量.如:用户重试.代码重试逻辑等. ...
- Vue 表情输入组件,微信face表情组件
VUE表情包输入组件,先来张成品图看看. 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧. 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 ...
- [C#.net]使用Thread.Sleep界面卡死的问题解决方法
很多初学者在写C#程序的时候,需要程序等待某个时间,但是又不想用比较繁琐的线程等操作,因此用Thread.Sleep()函数,但是这个函数在等待过程中会操作界面的卡死,那么,如何能保证既不卡死又能达到 ...
- 【原创】大叔经验分享(66)docker启动tomcat不输出catalina.out
docker启动tomcat默认是: Run the default Tomcat server (CMD ["catalina.sh", "run"]): 查 ...
- Vue-CLI项目汇总
Vue-CLI 项目搭建 Vue-CLI 项目在pycharm中配置 Vue-CLI 项目中相关操作 Vue-CLI项目中路由传参 Vue-CLI项目-vue-cookie与vue-cookies处理 ...
- JS基础_if语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...