关于JS 的原型和原型链
原型
JavaScript规定,每一个函数都有一个prototype对象属性,指向另一个对象。prototype对象属性的所有属性和方法都会被构造函数的实例继承。这意味着我们可以把那些公用的属性和方法,直接定义在prototype对象属性上。
prototype就是调用构造函数所创建的实例对象的原型(proto)。js在创建对象的时候,都有一个叫做proto的属性,用于指向它的函数对象的原型对象prototype。
prototype可以让所有的对象实例共享它包含的属性和方法。
原型链
每一个对象都可以有一个原型,这可原型还可以有它自己的原型,以此类推,就形成了原型链。
查找一个对象的属性或方法的时候,如果这个对象中没有这个属性或者方法,那就会在这个对象的原型对象中去找,以此类推,直到原型链结束。
_proto_
_proto_是原型链查询中实际用到的,指向构造函数的原型对象,他是对象独有的。对象._proto_ = 构造函数.prototype。
在js中,万物皆是对象,函数也是对象。所以构造函数也会有_proto_属性。
constructor
每个函数都有一个原型对象,该原型对象有一个constructor属性,指向创建对象的函数本身。
总结
1、只有函数才有prototype属性。
2、对象._proto_ = 构造函数.prototype。
3、构造函数的prototype指向原型对象,原型对象的constructor指向构造函数。
使用
prototype最主要的用法就是将属性暴露成公用的。
function Person(name) {
this.name = name;
this.f = function() {
console.log("name is " + this.name)
}
}
var wang = new Person("wang");
var li = new Person("li");
console.log(wang.name); //wang
console.log(li.name); //li
console.log(wang.f === li.f); //false
虽然wang和li都有f属性,但是实例对象访问的都是自己的私有属性。
使用prototype将f方法变成公共属性:
function Person(name) {
this.name = name;
}
Person.prototype.f = function() {
console.log("name is " + this.name)
}
var wang = new Person("wang");
var li = new Person("li");
console.log(wang.name); //wang
console.log(li.name); //li
console.log(wang.f === li.f); //true
这就是prototype最大的作用:将属性或方法暴露为共有。
关于JS 的原型和原型链的更多相关文章
- Js 原型和原型链
Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...
- 【repost】JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解(转)
JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...
- 总结一下js的原型和原型链
最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...
- JS原型和原型链
1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...
- 第20篇 js高级知识---深入原型链
前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...
- 深入JS原型与原型链
要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...
- JS 原型与原型链
图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...
- js之原型,原型链
1.原型是什么? 在构造函数创建出来的时候,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象 默认的原型对象中会有一个属性constructor指向该构造函数 原型 ...
随机推荐
- 物联网架构_对AWS的Greengrass的认识与理解
物联网架构_对AWS的Greengrass的认识与理解 一,前言: 这段时间有许多的收获,分析,还有总结,其中包括新系统的设计与开发,以及其中新技术的踩坑等等等. 但是最近真的很忙,项目的推进,面试工 ...
- SpringMVC框架之第三篇
2.高级参数绑定(重点) 2.1.数组类型 数组类型的参数可以传递一批相同的数据到Controller的方法中. 2.1.1.需求 批量删除:在商品列表页面选中多个商品,然后删除. 2.1.2.需求分 ...
- Android utils 之 日志工具类
工具类 在开发的过程中,我们时常会对代码执行特定的处理,而这部分处理在代码中可能多次用到,为了代码的统一性.规范性等,通过建工具类的方式统一处理.接下来我会罗列各种工具类. 日志工具类 在utils文 ...
- AlertDialog创建对话框的测试
AlertDialog的功能是非常强大的,它可以创建各种对话框,它的结构分为:图标区.标题区.内容区.按钮区共四个区域.以这样的思路区创建AlertDialog是非常简单的. 创建AlertDialo ...
- jQuery - 拦截所有Ajax请求(统一处理超时、返回结果、错误状态码 )
样例代码: <html> <head> <title>hangge.com</title> <meta charset="utf-8&q ...
- XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1)
XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1) APPLIES TO: ...
- PyCharm 快捷键失效解决办法
PyCharm快捷键用着用着失效了 ......修改设置如下 重新启动Pycharm即可 原博客地址:https://blog.csdn.net/jacke121/article/details/82 ...
- VSCode+C++环境搭建
date: 2019-10-05 VSCode+C++环境搭建 其实并不完整,毕竟我也只是一个OIer,并不会很高深的东西.(众所周知,OIer主业是软件开发) 安装VSCode 下载安装包 这个很简 ...
- 函数防抖VS函数节流
(1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: ...
- 数组中重复的数字(剑指offer_3)
在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的,也不知道每个数字重复几次.请找出数组中任意一个重复的数字. Input: {2,3,1,0 ...