美文网首页
js原型和闭包(6)——继承

js原型和闭包(6)——继承

作者: 为君梳作半面妆 | 来源:发表于2017-10-15 12:31 被阅读0次

为何用“继承”为标题,而不用“原型链”?
原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆。而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中的继承又完全是两回事儿。因此,这里把“继承”着重拿出来,就为了体现这个不同。
javascript中的继承是通过原型链来体现的。先看几句代码
function Foo(){};
var f1= new Foo();
f1.a=100;
Foo.prototype.b=200;
console.log(f1.a);
console.log(f1.b);
以上代码中,f1是Foo函数new出来的对象,f1.a是f1对象的基本属性,f1.b是怎么来的呢?——从Foo.prototype得来,因为f1.__proto__指向的是Foo.prototype
访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条链向上找,这就是原型链。

上图中,访问f1.b时,f1的基本属性中没有b,于是沿着__proto__找到了Foo.prototype.b。
那么我们在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢?大家可能都知道答案了——hasOwnProperty,特别是在for…in…循环中,一定要注意。

eg:function Foo(){};

var f1= new Foo();

f1.a=100;

Foo.prototype.b=200;
var item;

for(item in f1){

console.log(item);

}

eg:function Foo(){};

var f1= new Foo();

f1.a=100;

Foo.prototype.b=200;

var item;

for(item in f1){

if(hasOwnProperty(item)){

  console.log(item);
}

}
等等,不对! f1的这个hasOwnProperty方法是从哪里来的? f1本身没有,Foo.prototype中也没有,哪儿来的?
好问题。
它是从Object.prototype中来的,请看图:

对象的原型链是沿着__proto__这条线走的,因此在查找f1.hasOwnProperty属性时,就会顺着原型链一直查找到Object.prototype。
由于所有的对象的原型链都会找到Object.prototype,因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。

当然这只是一个例子,你可以自定义函数和对象来实现自己的继承。
我们都知道每个函数都有call,apply方法,都有length,arguments,caller等属性。为什么每个函数都有?这肯定是“继承”的。函数由Function函数创建,因此继承的Function.prototype中的方法。不信可以请微软的Visual Studio老师给我们验证一下:

看到了吧,有call、length等这些属性。

那怎么还有hasOwnProperty呢?——那是Function.prototype继承自Object.prototype的方法。有疑问可以看看上一节将instanceof时候那个大图,看看Function.prototype.__proto__是否指向Object.prototype。

相关文章

  • 前端开发必须知道的JS(一) 原型和继承(转载)

    前端开发必须知道的JS(一) 原型和继承 原型和闭包是Js语言的难点,此文主要讲原型及原型实现的继承,在(二)中会...

  • js原型和闭包(6)——继承

    为何用“继承”为标题,而不用“原型链”?原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆。而“继...

  • 全面理解面向对象的 JavaScript

    JS对象,构造器,原型,原型链,原型继承,类继承,私有成员(读取私有成员可通过闭包) 全文转载,请移步:https...

  • 原型链

    原型链 this指向 作用域和预解析 new关键字 闭包 继承 JS 规定,所有对象都有自己的原型对象(proto...

  • 携程面试总结

    1.对js闭包的理解2.对原型的理解3.js怎么实现继承4.js怎么实现私有变量5.angular的双向绑定实现6...

  • 2020-06-01 学习计划

    1、js:红宝书,重点:原型,继承,闭包,设计模式 2、webpack: 打包原理,性能优化,配置,插件,看视频 ...

  • 继承-原型链-作用域-this-闭包-生命周期-垃圾回收机制

    继承-原型链-作用域-this-闭包

  • 2020-06-23 面试

    六度人和 原型和原型链 es5 和 es6 继承 闭包 盒模型、flex:1 option 请求 协商缓存,事件循...

  • es5核心技术

    立即执行函数 函数提升和变量提升 闭包 this 原型链实现继承

  • ! js手写实践

    1.闭包2.js执行机制3.new发生了什么4.防抖和节流5.js原型和原型链6.js作用域和作用域链7.深拷贝、...

网友评论

      本文标题:js原型和闭包(6)——继承

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