JavaScript 原型与原型链
__proto__
用来获取和设置对象原型,但它是非标准的。__proto__
前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的API,只是由于浏览器广泛支持,才被加入了ES6。标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。因此,无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()
(写操作)、Object.getPrototypeOf()
(读操作)、Object.create()
(生成操作)代替。
创建对象的各种方式 对其原型链的影响
- var o = {a: 1};
- Object.getPrototypeOf(o) === Object.prototype //true
- // o ---> Object.prototype ---> null
- var a = ["yo", "whadup", "?"];
- // a ---> Array.prototype ---> Object.prototype ---> null
- function f(){
- return 2;
- }
- // f ---> Function.prototype ---> Object.prototype ---> null
普通对象 o 的原型 指向 Object对象的prototype属性。
数组对象 a 的原型 指向 Array对象的prototype属性。 而 Array对象的 prototype属性也是对象,它的原型 指向 Object.prototype属性。
函数f 的原型 指向 Function对象的prototype属性。
- function Graph() {
- this.vertices = [];
- this.edges = [];
- }
- Graph.prototype = {
- addVertex: function(v){
- this.vertices.push(v);
- }
- };
- var g = new Graph();
- var r = Object.getPrototypeOf(g) === Graph.prototype ; // true
var s =Object.getPrototypeOf(g) === Graph ; // false
使用new 关键字来创建对象。对象g 的原型指向 Graph.prototype。 (注意区别g的原型指向 Graph )
- var a = {a: 1};
- // a ---> Object.prototype ---> null
- var b = Object.create(a);
- // b ---> a ---> Object.prototype ---> null
- var r = Object.getPrototypeOf(b) === a.prototype ;
var s =Object.getPrototypeOf(b) === a ;console.log(b.a); // 1 (inherited)
- var c = Object.create(b);
- // c ---> b ---> a ---> Object.prototype ---> null
- var d = Object.create(null);
- // d ---> null
- console.log(d.hasOwnProperty);
使用Object.create来创建对象,b的原型指向了a ,(注意不是a.prototype)
- class Polygon {
- constructor(height, width) {
- this.height = height;
- this.width = width;
- }
- }
- class Square extends Polygon {
- constructor(sideLength) {
- super(sideLength, sideLength);
- }
- get area() {
- return this.height * this.width;
- }
- set sideLength(newLength) {
- this.height = newLength;
- this.width = newLength;
- }
- }
- var sq = new Square(2);
使用class 创建对象sq 的原型指向Square.prototype , 而 子类Square 的原型 指向父类 Polygon (注意不是Polygon.prototype)
参考链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
JavaScript 原型与原型链的更多相关文章
- JavaScript继承与原型链
对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了c ...
- 【javascript基础】4、原型与原型链
前言 荒废了好几天,在宿舍闷了几天了,一直想着回家放松,什么也没搞,论文就让老师催吧.不过,闲的没事干的感觉真是不好,还是看看书,写写博客吧,今天和大家说说函数的原型. 原型是什么 第一次看到这个的时 ...
- 【JavaScript】深入理解JavaScript之强大的原型和原型链
由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...
- Javascript 原型和原型链
先来了解一下Javascript中的原型:”原型也是一个对象,原型可以用来实现继承...“ 对于 原型,构造函数,以及实例之间的关系:“每个(构造)函数都有一个原型属性,原型对象都包含一个指向构造函数 ...
- javascript 原型 和 原型链
最近几天,好些新同事来问原型,原型链啥的.本身作为菜鸟的我好像也没有好好整理过这个,这里写写自己的理解. 原型 大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype ...
- JavaScript深入之从原型到原型链(本文转载)
JavaScript深入之从原型到原型链(本文转载) https://github.com/mqyqingfeng/Blog.原文地址 构造函数创建对象 我们先使用构造函数创建一个对象: functi ...
- javascript 之原型、原型链-14
原型 原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性. ...
- JavaScript原型与原型链
一.数据类型 JavaScript的数据类型可以分为基本数据类型和引用数据类型. 基本数据类型(6种) String Number Boolean null undefined Symbol(ES6) ...
- JavaScript prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- 对Javascript 类、原型链、继承的理解
一.序言 和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...
随机推荐
- ifconfig命令详解
linux下网上命名规律:eth0,eth1.第一块以太网卡,第二块.lo为环回接口,它的IP地址固定为127.0.0.1,掩码8位.它代表你的机器本身. 1.ifconfig是查看网卡的信息 eth ...
- 矩阵快速幂(入门) 学习笔记hdu1005, hdu1575, hdu1757
矩阵快速幂是基于普通的快速幂的一种扩展,如果不知道的快速幂的请参见http://www.cnblogs.com/Howe-Young/p/4097277.html.二进制这个东西太神奇了,好多优秀的算 ...
- Tomcat相关目录及配置文件总结
Tomcat根目录介绍 [bin]目录主要是用来存放tomcat的命令,主要有两大类,一类是以.sh结尾的(linux命令),另一类是以.bat结尾的(windows命令). 很多环境变量的 ...
- mongodb的地理空间索引常见的问题
创建地理空间索引注意事项 创建地理空间索引失败,提示错误信息如下 > db.places.ensureIndex({"loc":"2dsphere"}){ ...
- asp.net+Sqlserver 通过存储过程读取数据
Sqlserver代码 创建存储过程如下: /*根据父id获取类别总数*/ IF EXISTS (SELECT name FROM sysobjects WHERE name = N'getsite ...
- discuznt学习笔记
DBWR=DbHelper(client) Discuz.Data部分 DbHelper相当与抽象工厂中的Client,其中定义了需要与数据库进行操作的通用方法(如ExecuteScalar,Fi ...
- VS2013 编译 MySql Connector C 6.1.6
1.下载cmake http://cmake.org/ 2.下载最新版MySql Connector C http://www.mysql.com 3.命令行下,转到源代码目录下,"cmak ...
- VS2010 IE10 调试时报“未能将脚本调试器附加到计算机”,已经附加了一个进程
解决办法:以管理员身份打开CMD,运行:regsvr32.exe "%ProgramFiles(x86)%\Common Files\Microsoft Shared\VS7Debug\ms ...
- C#操作Excel文件(转)
摘要:本文介绍了Excel对象.C#中的受管代码和非受管代码,并介绍了COM组件在.net环境中的使用. 关键词:受管代码:非受管代码:Excel对象:动态连接库 引言 Excel是微软公司办公自动化 ...
- 【回忆1314】第一次用AngularJS
1.创建指令的4种方式(ECMA) var appModule = angular.module('app', []); appModule.directive('hello', function() ...