JavaScript基础12.原型与原型链深入、对象继承

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量35 收藏
点赞数
分类专栏： JavaScript基础 文章标签： javascript 前端 原型模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45929358/article/details/129842238
版权
文章详细介绍了JavaScript中的原型和原型链机制，包括对象的原型、原型链的构建、原型链的查找过程以及如何通过Object.create()创建对象。此外，还讨论了原型方法的重写、call和apply方法用于改变this指向的应用，并给出了具体的代码示例，展示了如何在实际编程中实现继承和组合功能。
摘要由CSDN通过智能技术生成

12.1原型

所有的对象都有自己的原型，包括原型本身也有自己的原型

function Car(){}

var car = new Car();
console.log(Car.prototype);
console.log(car);

image.png

12.2原型链

沿着proto去找原型里的属性，一层一层的去继承原型的属性的这条链条叫做原型链

Professor.prototype.tSkill = 'JAVA';
function Professor(){}

var professor = new Professor();

// 原型链继承
Teacher.prototype = professor;
function Teacher(){
  this.mSkill = 'JS/JQ';
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
  this.pSkill = 'HTML/CSS';
}

var student = new Student();
console.log(student);
student.mSkill;	// JS/JQ
student.tSkill;	// JAVA

原型链的顶端是 Object.prototype

原型上的引用值可以修改

Professor.prototype.tSkill = 'JAVA';
function Professor(){}

var professor = new Professor();

Teacher.prototype = professor;
function Teacher(){
  this.mSkill = 'JS/JQ';
  this.success = {
    alibaba: '28',
    tencent: '30'
  }
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
  this.pSkill = 'HTML/CSS';
}

var student = new Student();
student.success.baidu = '100';
student.success.alibaba = '29';
console.log(teacher, student);

原型上的原始值不能修改

祖先原型上的原始值不能修改，修改原始值，会认为是给自己添加一个属性值

Professor.prototype.tSkill = 'JAVA';
function Professor(){}

var professor = new Professor();

Teacher.prototype = professor;
function Teacher(){
  this.mSkill = 'JS/JQ';
  this.students = 500;
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
  this.pSkill = 'HTML/CSS';
}

var student = new Student();
student.students++;
console.log(student.students);
console.log(teacher, student);

image.png

student.students++相当于student.students+1=501,然后将其赋值给student的students

面试题

function Car(){
  this.brand = 'Benz';
}

Car.prototype = {
  brand: 'Mazda',
  intro: function(){ 
    // 这里的 this 指向的是 Car 自己，Car 自己有 brand，所以不回去原型上找了，谁在使用 this 就指向谁
    console.log('我是' + this.brand + '车');
  }
}

var car = new Car();

car.intro(); // Benz


function Person(){
  // this = {
  // 	weight: 129
  // }
  this.smoke = function(){
    this.weight--;
  }
}

Person.prototype = {
  weight: 130
}

var person = new Person();
person.smoke();
console.log(person.weight);
console.log(Person.prototype);
console.log(Person);

image.png

为什么控制台执行函数，函数没有返回值的时候回打印undefined
因为普通函数没有写返回值，默认返回undefined;
构造函数通过实例化以后，返回的是this

自定义的构造函数的构造器指向自定义的构造函数

// 字面量构造
var obj1 = {}; 
console.log(obj1);// Object顶端原型

// 系统内置对象构造，一般不使用
var obj2 = new Object();
console.log(obj2);// Object顶端原型


// 自定义构造函数
function Obj(){}
var obj3 = new Obj();
console.log(obj3);//自定义的构造函数的构造器指向自定义的构造函数

image.png

原型也有原型

function Obj(){}
var obj = new Obj();
console.log(obj.__proto__);

image.png

12.3 Object.create(对象 / null) 创建对象

提供了一个自定义原型的功能

function Obj(){}
Obj.prototype.num = 1;
var obj1 = Object.create(Obj.prototype);
var obj2 = new Obj();
console.log(obj1);
console.log(obj2);
// obj1 和 obj2 产生的效果是一模一样的

image.png

var test = {
  num: 2
}

function Obj(){}
Obj.prototype.num = 1;

// Object.create 提供了一个自定义原型的功能
var obj1 = Object.create(test); 
// 将 test 作为原型传递进来
var obj2 = new Obj();
//new做了什么
//实例化obj2
//调用构造函数Obj的初始化属性和方法
//指定实例对象的原型
console.log(obj1);
console.log(obj2);

image.png

Object.create 把其它的对象作为原型来使用

// 创建 obj1 空对象
var obj1 = Object.create(null);
console.log(obj1); // {} 里面什么都没有，也没有原型

image.png、

var obj1 = Object.create(null);
console.log(obj1); 

obj1.num = 1;
var obj2 = Object.create(obj1);
console.log(obj2); // obj1 作为 obj2 的原型传递进来，所以挂载到了 proto 上

image.png

不是所有的对象都继承于 Object.prototype，如 Object.create(null)

var obj = Object.create(null);

obj.num = 1;
console.log(obj); // 没有原型


var obj = Object.create(null);
obj.num = 1;

var obj1 = {
  count: 2
}
// 这只是自己自定义的一个属性，而不是原型
// proto 必须得是系统内置的，可以更改它，但不能自造
obj.__proto__ = obj1; 


console.log(obj);// 没有原型
console.log(obj.count); // undefined
console.log(obj1);

image.png

undefined 和 null 能否使用 toString 方法

不能，因为 undefined 和 null 不能经过包装类转为 对象，它也没有原型，所以无法继承Object.prototype
原始值是没有属性的。

var num = 1;
var obj = {};
var obj2 = Object.create(null);

document.write(num);//1
// document.write 是一定是经过一个隐式转换，转换为 string 的

document.write(obj); // [object Object]: 对象形式的 Object

document.write(obj2); // 报错：cannot convert object to primitie value
// 因为 obj2 里面什么都没有，没有办法继承 Object.prototype，便没有办法使用 toString 方法，所以报错


obj2.toString = function(){
  return '你好';
}
console.log(obj2.toString()); // 你好

12.4原型方法的重写

Obeject.prototype 上有 toString 方法，Number.prototype 上也有自己的 toString方法，这就是对原型方法的重写

Object.prototype.toString.call(1); // '[object Number]':对象类型的 Number 构造函数
Object.prototype.toString.call('a'); // '[object String]'

Number.prototype.toString.call(1); // '1'

包装类（系统内置的构造函数）里都有 toString 方法

为什么Number没有继承Object的toString方法，为什么要自己写一个?
因为 Obeject.prototype 的 toString 打印的值是 [object, 构造函数名]，不想要的返回值，所以需要重写一个，是原型里重写了toString 这个方法

12.5call / apply 更改 this 指向

function test(){
  console.log('a');
}
test(); // 相当于 test.call();系统隐式的加了 call

call
第一个参数是一个对象，将使用前面构造函数的属性和方法

    function Car(brand, color){
        this.brand = brand;
        this.color = color;
      //相当于
      //newCar.brand = brand;
      //newCar.color = color;
    }
    var newCar = {};

    Car.call(newCar, 'Benz', 'red');
    console.log(newCar);

image.png
apply
和call一样，后面参数用数组

    function Car(brand, color){
        this.brand = brand;
        this.color = color;
    }
    var newCar = {};

    Car.apply(newCar, ['Benz', 'red']);
    console.log(newCar);

image.png

12.6应用

计算器

function Compute(){
  this.plus = function(a, b){
    console.log(a + b);
  }
  this.minus = function(a, b){
    console.log(a - b);
  }
}

function FullCompute(){
  // 通过 apply 借用 Compute 的功能
  Compute.apply(this); // this代表我的实例
  this.mul = function(a, b){
    console.log(a * b);
  }
  this.div = function(a, b){
    console.log(a / b);
  }
}

var compute = new FullCompute();
compute.plus(3, 5);
compute.minus(3, 5);
compute.mul(3, 5);
compute.div(3, 5);

题目

年龄为多少岁姓名为XX 买了一辆排量为xx的什么颜色的什么牌子的车
利用 call 和 apply 合并 Car 和 Person 两个构造函数，打印出上面的这句话

   function Car(brand, color, displacement) {
        this.brand = brand;
        this.color = color;
        this.displacement = displacement;
        this.info = function(){
            return '排量为' + this.displacement + '的' + this.color
                + this.brand
        }
    }

    function Person(opt) {
        Car.call(this, opt.brand, opt.color, opt.displacement)

        this.name = opt.name;
        this.age = opt.age;
        this.say = function(){
            console.log('年龄' + this.age + '岁姓名为' + this.name + '买了一辆' + this.info());
        }

    }

    var p = new Person({
        name: '张三',
        age: 28,
        brand: '奔驰',
        color: '红色',
        displacement: '3.0'
    });
    p.say();

image.png

Blue blazer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 原型与原型链以及继承方式
阳光、男孩
12-27 217
原型 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个...
JavaScript中的类、原型、原型链、继承
qf2019的博客
04-02 215
JavaScript在ES6之前严格意义上是没有像JAVA,C#这种语言中类的概念的。ES6添加了class,但其实这个class也只是ES6以前的构造函数和原型的语法糖而已。要想真正了解JavaScript中最复杂的部分,就得从最初的构造函数和原型讲起。 类 在ES6以前，我们是这样实例化一个对象的： 首先声明一个构造函数，一般用首字母大写来区分构造函数和普通函数. function Animal(name, age) { this.name = name this.age = age } 接下
Object.prototype解析
Sfh的博客
07-13 4125
Object.prototype是一个对象，用于表示Object的原型对象。几乎所有的JavaScript对象都是Object的实例，其原型链上最后一个就是指向Object.prototype。一个典型的对象继承了Object.prototype的属性和方法。 也可以创建没有原型对象的对象，比如通过Object.create(null)创建，或通过Object.setPrototypeOf(obj, null)方法来改变指定对象的原型对象。 改变Object.prototype的属性和方法，或给Object
JavaScript原型对象和对象原型、原型继承、原型链
Bulut0907
07-01 551
可以声明原型对象prototype为一个对象，同时声明多个共享的属性和方法。但需要通过constructor重新指向构造函数Star，否则指向Object就找不到构造函数Star了。原型链的查找规则如下。可以使用instanceof运算符，检测构造函数或实例化对象是否出现在某个实例化对象的原型链上。可以定义一个父类，然后通过原型继承来继承父类，最后实现子类自有的属性和方法。
JS原型与原型链详解—JavaScript基础篇
qq_21280835的博客
03-17 1361
我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。字面意思即prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含属性和方法。无论什么时候，只要创建了一个新函数，就会根据一组特定规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。
JavaScript使用原型和原型链实现对象继承的方法详解
10-20
JavaScript中的对象继承是基于原型和原型链的概念。原型（prototype）是JavaScript中每个函数对象的一个内置属性，它关联了一个对象，这个对象包含了可共享的属性和方法。原型链（prototype chain）则是通过原型对象...
深入理解javascript原型链和继承
10-25
经典继承指的是早期的原型继承模式，它通过在子函数的原型对象上直接设置属性和方法来实现继承，这种方式存在的缺点与原型链继承类似。组合式继承是结合了原型链继承和构造函数继承的优点，既可以通过原型链继承父...
图文详解JavaScript的原型对象及原型链
10-21
JavaScript的原型对象和原型链是理解JavaScript继承机制的关键概念。首先，我们来区分两个关键的属性：`prototype`和`__proto__`。 1. `prototype`：主要用于构造函数，它是构造函数的一个属性，用于定义实例对象将...
JavaScript原型链与继承操作实例总结
10-18
主要介绍了JavaScript原型链与继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 450
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 262
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 201
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 419
注释很详细，直接上代码……
【无标题】
weixin_42348009的博客
08-14 82
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 892
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 474
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1022
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 414
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
JavaScript对象继承与原型链解析
"本资源详细介绍了JavaScript中的对象继承机制，包括如何通过原型链实现对象的扩展和继承。示例代码展示了如何使用构造函数创建自定义对象，并通过原型对象的继承来扩展功能。" 在JavaScript中，面向对象编程是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值