浅谈原型和原型链!

本文深入探讨JavaScript中的原型和原型链概念,包括构造函数、new操作符的四步过程、__proto__与prototype的关系,以及如何通过原型链实现属性和方法的继承。通过实例展示了原型链的工作原理,帮助理解JavaScript中对象间的继承关系。
摘要由CSDN通过智能技术生成

原型

定义:原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法,原型也是对象。
利用原型特点和概念,可以提取公共属性
对象如何查看对象的构造函数:constructor
对象如何查看原型:隐式属性__proto__

函数对象(联系)

所有引用类型(函数,数组,对象)都拥有**proto属性(隐式原型);
所有函数拥有
prototype属性(显式原型)(仅限函数)
原型对象:拥有
prototype**属性的对象,在定义函数时就被创建

在讨论__proto__ 、prototype 、constructor这三者之间的关系,我们要先看一下构造函数的定义:

new关键字的四步过程:

  1. 在构造函数代码开始执行前,创建一个空的对象;
  2. 修改this的指向,把this指向刚刚创建出来的空对象;
  3. 执行函数的代码;
  4. 在函数完成之后返回this–即创建出来的对象;
Person.prototype.age = 18;
        function Person(name){
        this.name=name;
            // 模拟new构造过程
            // var obj = {
            //     __proto__ : Person.prototype
            // }
            // Person.call(obj)
            // this.name = name;
            // return obj;
            return {}
        }
        var p = Person("laila")
        

原型链(举例)

 Grand.prototype.lastName = "李";
        function Grand(){
        }
        var g = new Grand()

        Father.prototype = g;
        function Father(){
            this.name = "xiaoming";
            this.money = {//0x11
               "janghang" : 100
            }
            this.num = 1;
        }
        var f = new Father()

        Son.prototype = f;
        function Son(){
            this.hobbit = "打游戏"
        }
        var s = new Son()
        console.log(s.hobbit)//打游戏
        console.log(s.name)//xiaoming
        console.log(s.lastName)//李

s本身具体的方法只有Son里面的hobbit方法,但是由于上述代码的引式属性__proto__的指向形成了一个原型链式结构,所以s.hobbit,s.name,s.lastName都能调用到他们的祖先元素里面的属性和方法

实例s的隐式原型proto)指向它构造函数的显式原型(prototype),指向的意思是恒等于:

s.proto === Son.prototype

图示详解

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
以上四张图可对原型链有一个充分的理解!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值