js 中的原型prototype
每次创建新函数,就会根据规则为该函数创建一个 prototype 属性,该属性是一个指向函数原型对象的指针。并且原型对象都默认拥有一个 constructor 属性,该属性是一个指向那个新建函数的指针。
1、常规原型对象
function Person(){
}
Person.prototype.name = "Tom";
Person.prototype.job = "software engineer";
Person.prototype.age = 29;
Person.prototype.sayName = function (){
console.log(this.name);
}; var p1 = new Person();
var p2 = new Person(); p1.sayName(); // Tom
p2.sayName(); // Tom console.log(p1.sayName == p2.sayName); // true
下图展示了构造函数、原型对象、对象实例的关系
关于[[prototype]],在创建一个实例后,该实例内部将包含一个指向原型对象的指针[[prototype]],这个属性在有的实现中可以通过对象的 __proto__属性访问(有的浏览器或者执行环境不能)。要注意的是该属性是实例与构造函数的原型对象的联系,而不是实例与构造函数之间的联系。
上述两个对象实例 p1 和 p2 自身是没有属性和方法的,但都能调用sayName()方法。这是因为当读取某个属性时,会执行一次搜索,先从对象实例自身开始,如果本身有给定属性,则返回该属性的值;如果没有找到,则继续从它的原型对象中查找,找到则返回,没找到继续从原型对象的原型对象(如果该实例的原型对象有原型对象的话)中查找。找到为止,直至原型链的末端,如果最后还是没找到则报错。
介绍一些方法
function Person(){
}
Person.prototype.name = "Tom";
Person.prototype.job = "software engineer";
Person.prototype.age = 29;
Person.prototype.sayName = function (){
console.log(this.name);
}; var p1 = new Person();
var p2 = new Person(); p1.sayName(); // Tom
p2.sayName(); // Tom console.log(p1.sayName == p2.sayName); // true //判断对象之间是否是原型对象--实例的关系
console.log(Person.prototype.isPrototypeOf(p1)); //true
console.log(Person.prototype.isPrototypeOf(p2)); //true //Object.getPrototypeOf(),返回实例对象的[[prototype]]的值,即原型对象
console.log(Object.getPrototypeOf(p1) == Person.prototype); // true //hasOwnProperty(),继承自Object,检测对象自身是否存在某个属性
console.log(p1.hasOwnProperty("name")); //false // in 操作符,只要能通过对象访问到属性就返回true
console.log("name" in p1); // true //for-in 遍历所有能够访问到的且可枚举的属性
for(var prop in p1){
console.log(prop); //name,job,age,sayName
} // Object.keys(),返回参数对象自身的所有可枚举属性的字符串数组
var keys = Object.keys(Person.prototype);
console.log(keys); //["name","job","age","sayName"] //Object.getOwnPropertyNames(),返回参数对象自身的所有属性的字符串数组,包含不可枚举属性
keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys); //["constructor","name","job","age","sayName"] p1.name = "Greg"; console.log(p1.name); // Greg --来自实例
console.log(p2.name); // Tom --来自原型 console.log(p1.hasOwnProperty("name")); //true
console.log(p2.hasOwnProperty("name")); //false console.log("name" in p1); // true
console.log("name" in p2); // true console.log(Object.keys(p1)); //["name"]
keys = Object.getOwnPropertyNames(p1);
console.log(keys); ////["name"] delete p1.name;
console.log(p1.name); //Tom --来自原型
console.log(p1.hasOwnProperty("name")); //false
2、对象字面量形式的原型
function Person(){
} Person.prototype = {
name : "Tom",
job : "software engineer",
age : 29,
sayName : function (){
console.log(this.name);
}
}; var p1 = new Person();
var p2 = new Person(); p1.sayName(); // Tom
p2.sayName(); // Tom console.log(p1.sayName == p2.sayName); // true
console.log(p1 instanceof Object); //true
console.log(p1 instanceof Person); //true
console.log(p1.constructor == Person); //false
console.log(p1.constructor == Object); //true
对象字面量形式的原型,实际上是完全重写了默认的 prototype 对象,因此 constructor 属性已经是新对象的constructor属性了,指向Object,不再指向Person函数了。
可以在原型重写时加上constructor属性,手动添加属性,会导致它的[[enumerable]]特性设置为true,即设为可枚举的,而默认的原生constructor 属性是不可枚举的。
function Person(){
} Person.prototype = {
//constructor: Person,
name : "Tom",
job : "software engineer",
age : 29,
sayName : function (){
console.log(this.name);
}
};
//可以特别定义为不可枚举
Object.defineProperty(Person.prototype,"constructor",{
enmuerable:false,
value:Person
});
字面量对象重写原型可能会出现一些错误:
function Person(){
} var p1 = new Person(); Person.prototype = {
constructor: Person,
name : "Tom",
job : "software engineer",
age : 29,
sayName : function (){
console.log(this.name);
}
}; var p2 = new Person(); p2.sayName(); // Tom
p1.sayName(); // error : p1.sayName is not a function
上面例子中,先创建 p1 对象,后重写原型,导致 p1 的原型对象不是新的原型对象,所以执行 p1.sayName() 时,从 p1 的原型中找不到 sayName 方法。
如果支持__proto__属性的话,可以在重写原型对象后,添加语句:p1.__proto__ = Person.prototype; 重新建立实例和原型的关联。
js 中的原型prototype的更多相关文章
- js中的原型prototype
var arr1 = new Array(12,34,98,43,38,79,56,1); arr1.sum=function (){ var result = 0; for(var i=0; i&l ...
- JS 中的原型 -- prototype、__proto__ 以及原型链
原文: 1.深入理解javascript原型和闭包——prototype原型 2.三张图搞懂JavaScript的原型对象与原型链 打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一 ...
- js中的原型、继承的一些想法
最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...
- 谈谈JS中的原型
不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O( ...
- JavaScript中的原型prototype和__proto__的区别及原型链概念
问题 初学js的同学,总是搞不清楚js中的原型是什么东西,看着控制台打印出来的一串串__proto__,迷惑不已. 例如我定义一个Person,创建一个实例p,并打印实例. function Pers ...
- 说一说js中__proto__和prototype以及原型继承的那些事
在面试中遇到过,问js如何实现继承,其实最好的方式就是构造函数+原型,今天在讨论中,发现自己以前理解上的一些误区,特地写出来,最近都比较忙,等手上的项目做完,可以来做个总结. 先说我以前没有认识到位的 ...
- js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别
__proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype). proterty:这个方法是对象的属性 ...
- 【JS】中的原型prototype到底是个啥
一.什么是原型 原型prototype是函数的一个属性,这个属性是一个指针,指向一个对象(原型对象),这个原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 函数也是一种对象.它也是属性的 ...
- js中constructor和prototype
在最开始学习js的时候,我们在讲到原型链和构造函数的时候经常会有一个例子 如果我们定义函数如下: function Foo() { /* .. */ } Foo.prototype.bar = fun ...
随机推荐
- gentoo kvm qemu virt-manager - Unable to complete install: error creating macvtap interface macvtap0@: Operation not supported'
碰到这个一般是内核没有开启相应的 macvtap 选项,开启相应选项后,就不会报错了. Device Drivers ---> Network Device Support ---> &l ...
- 8.2.1.2-MySQL如何优化 WHERE 语句
这一章节讨论能够在WHERE处理语句中使用的优化. 样例使用SELECT 语句, 但是同样适用于DELETE,UPDATE语句中的WHERE语句. 注意 因为MYSQL优化器在不断的发展,MySQL执 ...
- scala快速一览
println("hello world"); val x = +; println(x); //val 不允许再次赋值 //x = 3; //变量var var xx = x; ...
- 《算法》第三章部分程序 part 4
▶ 书中第三章部分程序,加上自己补充的代码,包括散列表.线性探查表 ● 散列表 package package01; import edu.princeton.cs.algs4.Queue; impo ...
- 防止get访问方式乱码
有的情况下我们可能会用到get方式传参.就会涉及到乱码的问题... 现在就看一下如何解决get方式的乱码问题... 首先通过 javascript 的encodeURI()方法对参数进行两次编码. v ...
- flex学习笔记 显示数字步进
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- electron 项目的搭建方式,借助 node 和 npm
1,首先确定安装了 node 和 npm 2,创建一个文件夹,如 aa 3,CMD 命令进入到 aa,用 npm 命令初始化一个项目 4, npm -init 根据提示完成配置 5,安装 electr ...
- docker修改镜像名称
[root@localhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE pujh/centos tomcat-centos 70f ...
- ip黑白名单防火墙frdev的原理与实现
汤之盘铭曰 苟日新 日日新 又日新 康诰曰 作新民 诗曰 周虽旧邦 其命维新 是故 君子无所不用其极 ——礼记·大学 在上一篇文章<DDoS攻防战 (二) :CC攻击工具实现与防御理论>中 ...
- react-native-vector-icons 图标库使用
安装链接 yarn add react-native-vector-icons react-native link react-native-vector-icons 在项目工程中打开 .xcodep ...