!原型 构造-继承-原型链,null/undefined.toString(),call/apply

本文聚焦前端信息技术,介绍了原型、原型链、包装类、call/apply等知识。阐述了原型的定义、增删改查,如构造函数制造的对象可继承原型属性和方法;说明了原型链是对象间的继承关系;还提及null/undefined.toString()、包装类小bug,以及call/apply的使用和this指向问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原型

定义(prototype / proto / 继承):

原型也是一个对象,每一个函数function对象都有一个prototype属性,
构造函数制造出来的对象可以继承其原型上的属性和方法。我们可以把那些不变(公用)的属性和方法,直接定义在prototype对象属性上。

实例获得类的属性 =>继承
实现继承:通过构造函数产生的对象可以继承其原型上的属性和方法。原型也是一个对象。

在这里插入图片描述

原型对象:prototype是每个函数对象都具有的属性,被称为原型对象。

在这里插入图片描述

简单理解例子:

在这里插入图片描述
在这里插入图片描述

构造函数制造出的对象的公共祖先:
Father.prototype.a = '1p';
function Father() {
    this.a = 1;
    this.b = 2;
    console.log("--------------this",this);
}
Father.prototype.b = '2p';

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

原型和自己都有的,找自己的

在这里插入图片描述
在这里插入图片描述

共有的属性可以放在原型里面**

原型的增删改查:

在这里插入图片描述
增加:只能通过.prototype. 增加属性

删除:删除自己的属性,不能删除原型上的属性。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Car.prototype.constructor 、 car.constructor

定义
constructor 属性返回对创建此对象的数组函数的引用。
constructor始终指向创建当前对象的构造函数。

语法
object.constructor
使用
Car.prototype.constructor
constructor来自于原型对象,指向了构造函数的引用;
每个函数都有prototype属性,而这个prototype的constructor属性会指向这个函数;
car.constructor
原型对象中包含constructor这个属性,实例当中也同样会继承这个属性;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

obj.constructor.name

在JavaScript中,obj.constructor.name以字符串形式返回创建对象obj的构造函数的名称。这对于调试或动态检查对象的类型非常有用。

对于使用命名构造函数创建的对象,obj.constructor.name返回函数名

对于使用匿名构造函数创建的对象,它返回一个空字符串("")

对于内置对象(例如Array, Object),它返回标准名称(例如“Array”,“Object”)。

Car.prototype.constructor 可手动更改:

如果我们重写(重新定义)这个Car.prototype属性,那么constructor属性的指向就会发生改变了——2.
1.
在这里插入图片描述
在这里插入图片描述
如果我们重写(重新定义)这个Car.prototype属性,那么constructor属性的指向就会发生改变了。
2.

function Person2(name){
    this.name = name;
} 
var personOne=new Person2("xl"); 
Person2.prototype = {
    sayName: function(){
        console.log(this.name);
    }
};
var personTwo = new Person2('XL');
console.log(personOne.constructor); 
console.log(personTwo.constructor); 
console.log(Person2.prototype.constructor); 

在这里插入图片描述

console.log(personOne.__proto__, personOne.name); 
console.log(personTwo.__proto__, personTwo.name); 

在这里插入图片描述

proto 指向

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

是cherry还是sunny?

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
解释:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
改变的是人,不是改变同一个人的属性名字
在这里插入图片描述
在这里插入图片描述


在这里插入图片描述
在这里插入图片描述

原型链

实例对象与原型之间的连接,叫做原型链。proto( 隐式连接 )。
JS在创建对象的时候,都有一个叫做proto的内置属性,用于指向创建它的函数对象的原型对象prototype。

对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object.prototype对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链。

在这里插入图片描述

原型还有原型
__proto__属性,指向它的原型。

把原型连成链,是原型链。访问就是.prototype
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
原型链的上属性的增删改查 和原型的一样

小特例
在这里插入图片描述
在这里插入图片描述
引用值自己的修改
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
**********分割
在这里插入图片描述
在这里插入图片描述
*****分割
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
两种创建对象常用的一种:
在这里插入图片描述
在这里插入图片描述

Object.create(原型) create方法 创建对象

// var obj = Objest.create(原型);
var obj = {name: "sunny", age: 123};
var obj1 = Object.create(obj);

在这里插入图片描述

对象没原型例子Object.create(null)

构造出的对象没有原型 var obj0 = Object.create(null);

在这里插入图片描述
在这里插入图片描述
绝大多数对象的最终都会继承自Object.prototype!

null/undefined.toString()

在这里插入图片描述
在这里插入图片描述

包装类

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
重写的 toString
在这里插入图片描述
在这里插入图片描述

小bug,随机数例子

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
先×100再取整
在这里插入图片描述

call/apply与

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
obj代替this
在这里插入图片描述
在这里插入图片描述
借用别人的函数实现自己的功能
在这里插入图片描述
在这里插入图片描述

用人家Person的方法,实现自己功能的封装
封装完后:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

apply

只能传一个实参,(数组)。
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

运行test()和 new test();分别结果是啥?// 考察this

var a =5;
function test() {
    a=0;
    console.log(a);
    console.log(this.a);
    var a;
    console.log(a);
}

test(); // 0 5 0
new test(); // 0 undefined 0

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值