js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别
__proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype)。
proterty:这个方法是对象的属性。(据说和一个对象的attr类似,比如dom对象中)
prototype:每个构造函数都有一个prototype对象,这个对象指向该构造函数的原型。
对象自身属性方法和原型中的属性方法的区别: 对象自身的属性和方法只对该对象有效,而原型链中的属性方法对所有实例有效。
例子:
function baseClass(){
this.age = 12;//构造方法里面的age属性
this.showMsg = function(){//构造方法里面的showMsg方法
console.log("baseClass::showMsg");
}
}
baseClass.prototype.say = function () {//原型上定义的say方法
console.log('test');
}
baseClass.prototype.age = 23;//原型上定义的name属性 function extendClass(){};//extendClass新的构造方法
var b = new baseClass();//实例化一个baseClass
console.log(b,121212);//此时b对象包含了baseClass构造函数中的属性和方法,不包含baseClass原型上的属性和方法,原型中的属性和方法为所有实例所共享,不会单独到实例化的对象身上,当在实例化对象中调用原型中的属性和方法时,可以通过原型链得到原型中的属性和方法(对象自身没有同名属性和方法的前提下,否则是实例自身的属性和方法 extendClass.prototype = b;//把extendClass的原型指向实例化的b,即extendClass的原型中就具备了b对象所有的属性和方法 var instance = new extendClass();//实例化一个extendClass实例instance此时instance应该是一个空对象,但是后面赋值了,这里也有值(不知道为啥,按道理js是顺序执行的),instance.__proto__属性指向的是extendClass的原型对象,而extendClass.prototype等于baseClass构造函数的实例,所以最后instance.__proto__属性指向了baseClass构造函数,instance.__proto__.__proto__指向了最初的原型对象
instance.showMsg(); // 显示baseClass::showMsg
instance.name = 'branchName';//instance实例的name属性
instance.age = 34;//instance实例的age属性
var instance2 = new extendClass();//实例化另一个extendClass对象instance2
instance.say();//say方法是最初原型对象的方法
baseClass.prototype.name = 'xiugai';//修改最初原型对象的name属性,修改该属性会影响所有实例化队形(实例化对象自身没有该属性的情况下)
console.log(instance.name,instance.age);//name取的是instanace对象自身的name值‘branchName’,age同理
console.log(instance2.name,instance2.age);//instance取的是构造方法baseClass的原型对象上面的name值‘xiugai’,age取的同样是baseClass原型对象上的age,值为‘12’
baseClass.prototype.name = 'zaicixiugai';
console.log(instance2.name);//此时name变成了‘zaicixiugai’
var instance3 = new extendClass();
console.log(instance3);//instance3是一个空对象,它的原型链最终指向了baseClass的原型对象
给构造函数的prototype赋值的时候不能直接用
object.prototype = {}赋值,
如果这样赋值要加一行constructor属性,否则会覆盖掉object本身的原型指向。
js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别的更多相关文章
- js中__proto__和prototype的区别和关系? 这样好理解多了
原型的概念 真正理解什么是原型是学习原型理论的关键.很多人在此产生了混淆,没有真正理解,自然后续疑惑更多. 首先,我们明确原型是一个对象,其次,最重要的是, Every function has a ...
- JS中面向对象的,对象理解、构造函数、原型、原型链
6.1 理解对象 6.1.1 对象属性类型 ECMS属性有两种类型:数据属性和访问器属性 1 数据属性 [[configurable]] 表示能否通过Delete 删除属性从而从新定义属性,能否修改属 ...
- js中__proto__和prototype的区别和关系?
_proto__(隐式原型)与prototype(显式原型)1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性 ...
- 理解js中__proto__和prototype的区别和关系
首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__proto ...
- [转载]js中__proto__和prototype的区别和关系
首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性_ ...
- 说一说js中__proto__和prototype以及原型继承的那些事
在面试中遇到过,问js如何实现继承,其实最好的方式就是构造函数+原型,今天在讨论中,发现自己以前理解上的一些误区,特地写出来,最近都比较忙,等手上的项目做完,可以来做个总结. 先说我以前没有认识到位的 ...
- js中__proto__和prototype constructor 的区别和关系
https://www.zhihu.com/question/34183746 javaScript原型.原型链的定义? prototype:每个函数都有一个prototype(显式原型),这个属性是 ...
- js中__proto__和prototype的区别和关系
首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性_ ...
- (转)js中__proto__和prototype的区别和关系
作者:doris链接:https://www.zhihu.com/question/34183746/answer/58155878来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
随机推荐
- 解决Eclipse中文乱码的问题
注意:显示中文所有的编码方式主要是GBK和UTF-8,UTF-8是国际通用的中文编码标准,推荐使用. 一. 设置工作空间的编码 编辑器的编码会影响到所有的项目中的字符的显示,可以说是作用最为广泛的设置 ...
- [QT]问题记录-QPixmap::scaled 缩放不成功
解答的帖子: http://bbs.csdn.net/topics/391850818 使用 pix.scaled(400,400) 之后需要将图片返回就可以了.
- C-语言第二次作业(大一下)
要求一.设计过程 作业(1) 1.提交列表 6-7 删除字符串中数字字符 2.设计思路(6分 ...
- .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型
.NET 中提供了很多判断某个类型或实例是某个类的子类或某个接口的实现类的方法,然而这事情一旦牵扯到泛型就没那么省心了. 本文将提供判断泛型接口实现或泛型类型子类的方法. 本文内容 .NET 中没有自 ...
- VUE的使用方法
vueInit: function() { var _this = this; this.vue = new Vue({ el: '#pa', data: { //存放初始化数据 sourceData ...
- ORA-01652: 无法通过 128 (在表空间 TEMP 中) 扩展 temp 段(EXP-00056: 遇到 ORACLE 错误 1652 ORA-01652: unable to extend temp segment by 128 in tablespace TEMP)
数据库报 ORA-01652: 无法通过 128 (在表空间 TEMP 中) 扩展 temp 段 两种解决方式: 第一种) sql>select * from v$tempfile; 发现tem ...
- MHA配置文件说明
root@192.168.0.20 ~]# cat /etc/masterha/app1.cnf [server default] manager_workdir=/var/log/masterha/ ...
- python 可视化 词云图
文本挖掘及可视化知识链接 我的代码: # -*- coding: utf-8 -*- from pandas import read_csv import numpy as np from sklea ...
- WebDriverAgent原理
传输层:HTTP/HTTPS/HSF/Socket 安全性:HTTP/HTTPS 功能.单元 性能-限流.加服务器 目的:稳定的服务的TPS摸高测试(短时间的极限,不可持续) API接口测试-施压-服 ...
- Centos生成SSL证书的步骤
1.yum install openssl安装openssl组件2.生成KEY的流程步骤如下 1. 创建根证书密钥文件(自己做CA)root.key: openssl genrsa -out root ...