当前位置: 首页 > news >正文

Javascript 原型和原型链

8.1 原型的基本概念

  • 原型(prototype

    原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先,通过该构造函数产生的对象,可以继承该原型的属性和方法,原型也是对象。

    Person.prototype.lastName = '刘'
    function Person(){}
    
    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.lastName);	// 刘
    console.log(person2.lastName);	// 刘
    

8.2 原型有什么用

  • 原型的作用

    • 给我们构造函数实例化出的对象设置公共的属性或方法使用的
  • 方法写在哪

    • 方法写在原型上
      • 写在构造函数里的方法和属性会重新克隆一次,会导致占用内存较高
    • 需要配置的属性写在构造函数上
    function Person(name) {
        this.name = name; // 每个实例的私有属性
    }
    
    Person.prototype.getName = function() { // 所有实例共享的方法
        return this.name;
    };
    
    var person1 = new Person("Alice");
    var person2 = new Person("Bob");
    
    console.log(person1.getName()); // 输出:Alice
    console.log(person2.getName()); // 输出:Bob
    

8.3 原型链

  • 函数才有 prototype 属性,对象有 __proto__ 或 [[prototype]] 属性

    function Car(){}
    var car = new Car()
    console.log(Car.prototype)		// 函数有prototypr属性
    

    在这里插入图片描述

    console.log(car.prototype)	// undefined,对象没有prototype属性
    
    console.log(car)
    

    在这里插入图片描述

  • 原型链

    • js⾥万物皆对象,所以⼀直访问 _proto_ 属性就会产⽣⼀条链条

    • 链条的尽头是null

      在这里插入图片描述

    • 当js引擎查找对象的属性时,会先判断对象本身是否存在该属性

    • 不存在的属性就会沿着原型链往上找

在这里插入图片描述

  • 什么是原型链?

    原型链解决的主要是继承问题
    每个对象拥有⼀个原型对象,通过 proto 指针指向其原型对象,并从中继承⽅法和属性,同时原型对象也可能拥有原型,这样⼀层⼀层,最终指向 null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain),通过原型链⼀个对象可以拥有定义在其他对象中的属性和⽅法
    

8.4 类型检测

  • typeof

    ⽤于判断基础数据的类型,⽆法区分对象与数组

    var a = 1;
    console.log(typeof a); //number
    
    var b = "1";
    console.log(typeof b); //string
    
    var xd;
    console.log(typeof xd); //undefined
    
    function fun() {}
    console.log(typeof fun); //function
    
    var c = [1, 2, 3];
    console.log(typeof c); //object
    
    var d = { name: "白糖" };
    console.log(typeof d); //object
    
  • instanceof

    ⽤于判断复杂数据的类型,可以区分对象与数组

    instanceof 运算符⽤于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,可以理解为是否为某个对象的实例

    var xd = [];
    var xdclass = {};
    console.log(xd instanceof Array); //true
    console.log(xdclass instanceof Array); //false
    
    var a = [1, 2, 3];
    console.log(c instanceof Array); //true
    
    var b = { name: "baitang" };
    console.log(d instanceof Object); //true
    
    function Fun() {}
    var xd = new Fun();
    console.log(xd instanceof Fun); //true
    

相关文章:

  • [项目]基于FreeRTOS的STM32四轴飞行器: 七.遥控器按键
  • 【Recon】Git源代码泄露题目解题方法
  • java项目之基于ssm的智能训练管理平台(源码+文档)
  • 每日一题-----面试
  • 【Transformer优化】Transformer的局限在哪?
  • docker启动jenkins,jenkins中调用docker
  • KubeKey 与 KubeSphere:快速构建 Kubernetes 集群
  • 用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏
  • 通过定制initramfs实现从单系统分区到双系统的无缝升级
  • python自动工具起号迅速,批量自动发布各类短视频
  • C语言数据结构之顺序表
  • 剑指 Offer II 063. 替换单词
  • 计算机视觉算法实战——老虎个体识别(主页有源码)
  • Python中的装饰器(Decorator) 详解
  • 六十天前端强化训练之第十二天之闭包深度解析
  • 【RK3588嵌入式图形编程】-SDL2-SDL_Image使用详解
  • 3D空间曲线批量散点化软件V1.0正式发布,将空间线条导出坐标点,SolidWorks/UG/Catia等三维软件通用
  • 为什么 MySQL InnoDB 的 Repeatable Read 可以阻止幻读?
  • Django工程获取请求参数的几种方式
  • 一遍通俗易懂的新华三交换机文档指南操作手册
  • 跨文化戏剧的拓荒者与传承者——洪深与复旦剧社的百年回响
  • 媒体:“西北大学副校长范代娣成陕西首富”系乌龙,但她的人生如同开挂
  • 人民日报任平:从汽车产销、外贸大盘看中国经济前景
  • 美凯龙:董事兼总经理车建兴被立案调查并留置
  • 外国游客“在华扫货”热:“带空箱子到中国!”
  • 脑血管支架:救命神器还是定时炸弹?听听医生的大实话