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

6. 原型、原型链

6. 原型、原型链

  1. 每一个函数都有一个天生自带的属性 prototype[显示原型], 称为该函数的原型对象
  2. 每一个prototype原型对象上,都有一个天生自带的属性 constructor[构造器],指向当前函数本身
  3. 每一个对象都有一个天生自带的属性 proto[隐式原型],指向所属类[构造函数]的原型对象

6-1. 原型图示

function Person(name,age){
    this.name = name;
    this.age = age;
}
var p1 = new Person('张三', 19);
console.log(p1.__proto__ === Person.prototype);
console.log(Person === Person.prototype.constructor);

// dir dictionary 目录
console.dir(Person);
console.log(p1);

6-2.原型链

什么是原型链?

沿着对象的__proto__在上级原型对象上查找属性或方法的过程叫做原型链

function Person(name,age){
    this.name = name;
    this.age = age;
    // say方法会在每一个实例对象上都有一个,浪费内存空间
    this.say = function(){
        console.log('我的名字是: ' + this.name + ', 我的年龄是: ' + this.age);
    }
}
// 希望每一个实例对象能共用同一个方法,该方法或属性需要定义在类[构造函数的]原型对象上
Person.prototype.eat = function(){
    console.log(this.name + '正在吃饭');
}
var p1 = new Person('张三',19);
var p2 = new Person('李四',20);
p1.say();//
p2.say();
p1.eat();// 张三正在吃饭
p2.eat();// 李四正在吃饭
console.log('p1.eat === p2.eat: ',p1.eat === p2.eat);
console.log(p1.say === p2.say); // false

console.log('Person.prototype: ',Person.prototype)

console.log(Person.prototype.__proto__ === Object.prototype)

console.log(p1.toString());
console.log(p1.toString === p2.toString);

6-3.原型链重讲绘图

/**
 * 原型
 * 1. 每一个函数都有一个天生自带的属性prototype,他是函数的显示原型对象
 * 2. 每一个prototype显示原型对象,都有一个天生自带的属性 constructor,值是当前函数
 * 3. 每一个实例化出来的对象,都有一个天生自带的属性__proto__,指向所属类的原型对象
 * 
 * 原型链:
 * 当使用一个对象的属性或方法时,如果自身私有属性没有,沿着__proto__向上查找,如果还没有,继续沿着__proto__向上查找,直到找到Object.prototye为止,称为原型链
 */

function Person(name, age){
    // 私有属性和方法
    this.name = name;
    this.age = age;
    this.say = function(){}
}
var p1 = new Person('赵敏',20);// p1 有自己的name age say
var p2 = new Person('张无忌',21);// p2 也有自己的name age say
console.log(p1.say === p2.say);// false;

// 定义所有实例对象都可以访问的公有属性和方法,需要定义在该对象的构造函数的原型对象上
Person.prototype.eat = function(){// 公有的方法,p1,p2等所有实例对象共用
    console.log('eat')
}
Person.prototype.className = '230222'; // 公有属性 p1,p2等所有Person实例对象都可以共用

http://www.kler.cn/a/37747.html

相关文章:

  • 直流有刷电机
  • 【C】字符串函数和内存函数的介绍
  • 【分布式应用】Filebeat+ELK 部署、logstash filter四大过滤插件
  • 集群基础4——haproxy负载均衡mariadb
  • 【问题解决】VSCode 远程安装插件特别慢
  • 【HarmonyOS】Stage模型二维码/条码生成与解析
  • Java代码解析:求解数组的小和问题
  • vue3 + gzip +nginx 部署 静态文件被识别成text/html的问题
  • SQL事务与隔离
  • 4、Kubernetes 架构、理解 k8s 架构
  • 浅谈分布式系统 - 架构演进
  • git知识总结
  • Python 算法基础篇:大O符号表示法和常见时间复杂度分析
  • HOT67-寻找旋转排序数组中的最小值
  • MySQL-分库分表详解(七)
  • labelme+sam在windows上使用指南
  • ELk日志平台搭建
  • Android解压zip rar 7z文件
  • 华为公布多项专利许可计划和费率
  • Spring MVC 注解实现