彻底搞明白原型链

作者: 糖小羊儿 | 来源:发表于2021-03-30 11:31 被阅读0次
原型链.png

1.任何函数都可以通过new来创建实例

    let Func = function(){}
    function Animal(){}
    let afunc = new Func();
    let sheep = new Animal();

2.每一个实例都有一个 proto

console.log(afunc);//有 __proto__
console.log(sheep);//有 __proto__
console截图.png

3.每一个类或者函数都有个prototype属性

class Person{}  
let Func = function(){}
function Animal(){}
console.dir(Person) 
console.dir(Func) 
console.dir(Animal) 
console截图.png

4.所有的构造函数都是Function实例

我们打印Person,Func,Animal可以发现,他们也有个proto,并且 constructor是Function

console截图.png

5.prototype对象是Object的实例

我们打印Person,Func,Animal可以发现,他们的protype也有个proto,并且 constructor是Object

console截图.png

图中代码

function Person(){}
let son = new Person();
console.log(son.__proto__ === Person.prototype);  //true
console.log(Person.__proto__ === Function.prototype);  //true
console.log(Person.prototype.__proto__ === Object.prototype); //true
console.log(Object.__proto__=== Function.prototype);  //true
Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var son = new Person();
console.log(son.a) // undefined
console.log(son.b) // 'b'

原型链相关面试题

  • 面试题目1
var F = function () {};
Object.prototype.a = function () {
    console.log('a')
 };
Function.prototype.b = function () {
    console.log('b')
}
var f = new F();
执行:
f.a()//a()
f.b()//没有
F.a()//a()
F.b()//b()

函数是可以同时拥有Object和Function身上挂载属性,我们看图解题

  • 函数如果自身没有该字段,会自动向上查找,会找到Function,如果Function没有,会自动找到Object,所以函数会同时拥有Function和Object的字段

  • 而实例只会拥有他自身的构造函数和Object身上的字段

  • 面试题2

function Parent() {
        this.a = 'Parent';
    }
    function Tom() {
        this.a = 'Tom'
    }
    //parent的原型链是Function,所以下面的代码就类似Function.prototype.print = function(){ console.log(this.a)}
    Parent.__proto__.print = function () {
        console.log(this.a) //this指的是.前面那个对象,也就是Parent和Tom构造函数
    }
    Parent.print()// undefined 
    Tom.print()//Parent
    var child = new Parent()
    child.print() // child没有print方法,因为print方法是挂载到Function身上的
  • 面试题3
function Parent() {
    this.a = 1;
    this.b = [1, 2, this.a];
    this.c = {
        demo: 5
    };
    this.show = function () {
        console.log(this.a, this.b, this.c.demo,this.name,this.age);
    }
}
Parent.prototype.name='123';
Parent.__proto__.age='111';

let p1 = new Parent();
let p2 = new Parent();
p1.a=5;
p2.a=10;
p1.name='aaa';
p1.show();//5,[1,2,1] 5 'aaa'  undefined
p2.show();//10 [1,2,1] 5 '123'  undefined

相关文章

  • 彻底搞明白原型链

    1.任何函数都可以通过new来创建实例 2.每一个实例都有一个 proto 3.每一个类或者函数都有个protot...

  • javascript的原型链解读

    关于原型链的调用原理 只要明白js里访问一个对象的方法或属性的过程,就能彻底搞明白js的原型链。(首先要明确,js...

  • 2017-12-04

    一个例子让你彻底明白原型对象和原型链

  • 深入理解JS 中原型和原型链

    JS 中原型和原型链深入理解 首先要搞明白几个概念: 函数(function) 函数对象(function obj...

  • 彻底搞懂原型及原型链

    前言 说起原型链一直以来知道的都是沿着原型链向上找某个方法或属性。但是具体是怎么向上找的一直没有去搞清楚过。 这次...

  • 深入javascript之原型和原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型...

  • JS进阶(2) —— 人人都能懂的原型对象

    凡是搞前端开发的或者玩 JavaScript 的同学都知道,原型对象和原型链是 JavaScript 中最为重要的...

  • 彻底掌握js原型和原型链

    这块知识点比较抽象,我会尽量用代码+示意图的方式梳理。如果你有疑惑,请耐心看完,可能会有帮助。 构造函数和普通函数...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 彻底搞明白Android消息机制

    Android中的消息机制主要是指Handler的运行机制,而Handler的运行又离不开Looper和Messa...

网友评论

    本文标题:彻底搞明白原型链

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