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语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...
随机推荐
- 简单竖向Tab选项卡
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Java 小型学生管理系统心得
这个学生管理系统相对来说比较简单,主要就是复习下java怎么连接数据库,然后你怎么来实现这个功能,我简单的说下思路吧. 首先你要构思好这个界面,他包括增删查改这些基本功能,然后你去分析这些功能都能怎么 ...
- springMVC如何判断入参是默认参数还是请求传过来的参数?
springMVC如何判断入参是默认参数还是请求传过来的参数?
- gradle命令
gradle tasks 可以显示gradle可以做的任务. gradle build 就会生成jar包. build和clean install的作用是否一致?
- 查询oracle表和sql数据量大小
select t.TABLE_NAME,t.NUM_ROWS from user_tables t order by t.TABLE_NAME:--oracle SELECT object_name ...
- mysql 自带全文检索
对于一些简单的检索可以通过mysql自带的全文索引及 MATCH AGAINST 查询语句实现.实验步骤如下.1.建表DROP table IF exists con_video_file_des_t ...
- iOS SearchBar为什么跳不出来第三方输入法
去掉键盘类型就好了 // lineSearchBar.keyboardType = UIKeyboardTypeNamePhonePad;
- access 2007 vba 开发中学到的知识(二)
文件的导入和导出 excel 'excel导入Private Sub btnInExcel_Click() Dim strSelectFile As StringWith Application.Fi ...
- javascript 广告移动特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Leetcode 371: Sum of Two Integers(使用位运算实现)
题目是:Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. ...