美文网首页
关于js继承

关于js继承

作者: 一现_ | 来源:发表于2019-07-24 17:46 被阅读0次

链接来源于
https://www.cnblogs.com/Grace-zyy/p/8206002.html

https://blog.csdn.net/u011504806/article/details/80676490

https://www.cnblogs.com/wangfupeng1988/tag/%E5%8E%9F%E5%9E%8B%E9%93%BE/

这明确一个定义:什么是继承?

继承就是通过某些方法来获取到父类的属性和方法

函数可以看作是一个对象,但是对象都是通过函数来创建的

var obj = { a: 10, b: 20 };
 var arr = [5, 'x', true];

其实就是

//var obj = { a: 10, b: 20 }; 
//var arr = [5, 'x', true]; 
var obj = new Object(); 
obj.a = 10; 
obj.b = 20; 
var arr = new Array(); 
arr[0] = 5;
 arr[1] = 'x'; 
arr[2] = true;

熟悉一下prototype,每一个函数都有一个属性叫做prototype

这个prototype的属性值是一个对象(属性的集合),默认只有一个constructor属性,指向这个函数本身。

图片.png

如上图,SubType 是一个函数,右边方框就是它的原型

原型既然是一个对象(属性的集合),除了 constructor 外,还可以自定义许多属性,如:

图片.png

当然也可以在自定义的方法的 prototype 中增加属性,如


function Fn() { } 
Fn.prototype.name = '张三'; 
Fn.prototype.getAge = function () { 
  return 12; 
};
图片.png

再讲回 proto

“隐式原型”proto

再讲回 proto ,每个函数都有一个prototype,每个对象都有一个proto,可成为隐式原型

proto是个隐藏属性,指向创建该对象函数的prototype。

图片.png

如:

function Fn(){ }
 var f = new Fn() 
f.__proto__ === Fn.prototype // true

但是,Object.prototype确实一个特例——它的proto指向的是null,切记切记!!!(因为Object.prototype是最顶层的了,一切都是对象,最顶层都是继承Object.prototype的属性内容的)

图片.png

函数是一个对象,当然也有proto

function Foo(){ } 
var a = new Object(); 
var fn = new Function(); 
Foo.__proto__ === Function.prototype // true 
Foo.__proto__ === fn.__proto__ // true 
Function.__proto__ === Function.prototype // true 
Function.prototype.__proto__ === Object.prototype // true
图片.png

从上图可以看出:自定义函数 Foo.proto 指向 Function.prototype ,Object.proto 指向 Function.prototype。

但是,为什么有 Function.proto 指向 Function.prototype 呢?

其实原因很简单:Function 也是一个函数,函数是一种对象,也有proto属性。既然是函数,那么它一定是被 Function 创建。所以 Function 是被自身创建的。所以它的 proto 指向了自身的 Prototype

整个原型有关关系图如下:

图片.png

instanceof操作符

判断对象是否是另外一个对象实例,也就是判断一对象是否在对象的原型链上能找到

function fn() { } 
var f1 = new fn();
console.log(f1 instanceof fn); // true 
console.log(f1 instanceof Object); //true
图片.png

instanceof的判断规则为:

假设instanceof运算符的第一个变量是一个对象,暂时称为A;第二个变量一般是一个函数(也是对象),暂时称为B。

instanceof的判断规则是:沿着A的proto这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。

说一下原型链

访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着proto这条链向上找,这就是原型链。

在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢?

答案就是:hasOwnProperty这个函数,特别是在for…in…循环中,一定要注意。

(for...in循环会循环可枚举属性,自身属性和原型属性都会循环)

图片.png

f1并没有hasOwnProperty这个方法,这个方法是从Object.prototype中来的。

由于所有的对象的原型链都会找到Object.prototype,因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。

图片.png

对象的原型链是沿着proto这条线走的,因此在查找f1.hasOwnProperty属性时,就会顺着原型链一直查找到Object.prototype。

相关文章

  • 关于js继承

    链接来源于https://www.cnblogs.com/Grace-zyy/p/8206002.html htt...

  • js关于继承

    Javascript是一门基于原型链的语言构造函数,原型属性与实例对象三者的关系: Person 是一个构造函数(...

  • 关于JS‘继承’

    ‘继承’是面向对象里面的概念,看下维基百科如何介绍继承: 如果一个类别B“继承自”另一个类别A,就把这个B称为“A...

  • JS继承的几种方式

    关于Js继承的几种方式,总结一下,以便查看。 第一种 prototype 引用型原型继承 语言支持:js原生支持的...

  • 前端菜鸟成长记(三)之answer

    关于上次作业的答案 js有几种实现继承的方法(我直接给答案,原型链继承,借用构造函数继承,组合继承)?各自的优缺点...

  • ES5的继承和ES6的继承

    关于js中的继承,已经老生常谈了,本文将对js的继承做一个大概的总结. 首先我们可以看一下,es5继承关系图,理解...

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • 关于js继承的回顾

    一、js作为面向对象的若数据类型语言,其也是有继承特性的。但是由于js的类本身是函数,这就导致了js继承的特殊性。...

  • 关于js中的继承

    本文仅讨论如何通过原型链实现继承13年在某外企的时候,做的组件库,就是用的原型链继承,大概就是super类定义了一...

  • 关于js的继承方法

    1、原型链继承 原型链继承的问题:由于超类Super的属性变成了子类的原型属性,导致的结果是,如果超类的属性是引用...

网友评论

      本文标题:关于js继承

      本文链接:https://www.haomeiwen.com/subject/xwdfrctx.html