js构造函数的prototype赋值总结

我们知道通过构造函数的prototype,可以生成让所有实例对象访问的通用属性和方法,下面通过代码来解释这个过程

复制代码
function Person(name){
    this.name = name;
}

Person.prototype.sex = 'man'

我们定义了一个构造函数Person,然后给它的prototype添加了一个sex的属性,下面我们来看看Person的结构

复制代码
console.dir(Person)

下面,我们来实例化一个person的对象

复制代码
let person = new Person('mike')
console.dir(person)

上面的结构我们看的到person的原型_proto_(图片中的[[prototype]],浏览器写法的区别)指向了构造函数Person的prototype

复制代码
person.__proto__ === Person.prototype // true

这里需要特别注意的一点是__proto__和prototype属性都是作为对象的一个引用,是指针,指向存储中实际存在的一个变量,当变量中的属性和方法有变化的时候__proto__和prototype都会随之改变

如果prototype指针指向新的变量的时候,prototype会有一个新的值,但是__proto__并不会改变哦,因为它的指针没有变换指向哈,还是指向原来的变量,值当然不会改变.

我们来看看是不是和我们判断一样

复制代码
function Person(name){
    this.name = name;
}
Person.prototype.sex = 'man'
let person = new Person('mike')
Person.prototype = { age: 18 }
person.__proto__
//{sex: 'man', constructor: ƒ}
Person.prototype
//{age: 18} 

从上述代码看出,和我们的预判一致,下面我们多创建一些实例对象来体验一下

复制代码
function Person(name){
    this.name = name;
}
Person.prototype.sex = 'man'
let person1 = new Person('mike')
Person.prototype = { age: 18 }
let person2 = new Person('lili')

下面,我们分别来看重新赋值前后,两次实例对象的区别

复制代码
person1.age // undefined
person2.age //18
person1.sex // 'man'
person2.sex //undefined

所以,我们可以总结出,

1、构造函数prototype修改或者添加属性会对原实例对象产生影响

2、构造函数prototype重新赋值,不会对原实例对象产生影响,只会对修改后的实例对象有影响

相关推荐
丑小鸭是白天鹅4 分钟前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
萌萌哒草头将军8 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
sali-tec13 分钟前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
java搬砖工-苤-初心不变13 分钟前
基于 lua_shared_dict 的本地内存限流实现
开发语言·junit·lua
Qlittleboy32 分钟前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
charlie11451419136 分钟前
Kotlin 的 apply / with / run 详解
开发语言·kotlin·程序设计·面对对象
Tiger_shl41 分钟前
【层面一】C#语言基础和核心语法-02(反射/委托/事件)
开发语言·c#
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL1 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js