js中prototype与__proto__的关系详解
一、构造函数:
构造函数:通过new关键字可以用来创建特定类型的对象的函数。比如像Object和Array,两者属于内置的原生的构造函数,在运行时会自动的出现在执行环境中,可以直接使用。如下:
var arr = new Array();//使用Array构造函数创建了一个array实例arr arr[0]="a"; arr[1]="b"; alert(arr);//a,b var obj=new Object();//使用Object构造函数创建了一个Object实例obj obj.name="c"; obj.age=12; alert(obj.name);//c
我们可以自定义的创建构造函数,并为其自定义属性和方法,如:
//创建构造函数Person function Person(name,age){ this.name=name; this.age=age; this.sayName=function(){ alert(this.name)// }; } //使用new关键字,来生成Person实例 var person1=new Person("Tom",22); var person2=new Person("Jerry",21); person1.sayName();//Tom person2.sayName();//Jerry
注意以下几点:
- 构造函数的名字始终要以大写字母开头(主要是为了区别于非构造函数,也即是区别于普通函数)
- 构造函数也就是函数,定义构造函数和定义普通函数的语法一样。构造函数和普通函数的区别在于:使用他们的方式不同。任何函数只要使用new操作符来调用,那他就可以作为构造函数;不使用new操作符来调用就是普通函数
function Person(name,age){ this.name=name; this.age=age; this.sayName=function(){ alert(this.name)// }; } //当做构造函数使用 var person=new Person("Tom",22); person.sayName();//Tom //当做普通函数使用 Person("Jerry",30);//添加到window sayName();//Jerry 等同于window.sayName();
二、原型对象:
每个函数都有一个prototype属性,它是一个指向原型对象的指针,原型对象在定义函数时同时被创建,原型对象的用途是包含所有实例共享的属性和方法
function Person(){ } //自定义原型对象的属性和方法 Person.prototype.name="Tom"; Person.prototype.age=25; Person.prototype.sayName=function(){ alert(this.name); }; //原型对象中的所有属性和方法 都会自动被所有实例所共享 var person1=new Person(); var person2=new Person(); person1.sayName();//Tom person2.sayName();//Tom
只要创建了一个新函数,每个函数在创建之后都会获得一个prototype的属性,这个属性指向函数的原型对象(原型对象在定义函数时同时被创建),此原型对象又有一个名为“constructor”的属性,反过来指向函数本身,达到一种循环指向,
如在上边的例子中:alert(Person.prototype.constructor===Person);//会返回true
function Person(){} alert(Person.prototype.constructor===Person);//true
三、__proto__(注意这里proto左右两边都有两个"_")
当调用构造函数创建一个新实例后,该实例的内部将包含一个指针[[Prototype]],该指针指向创建它的构造函数的原型,在脚本上没有标准的方法来访问[[Prototype]],但大多数浏览器都支持通过__proto__来访问。
function Person(){ } //自定义原型对象的属性和方法 Person.prototype.name="Tom"; Person.prototype.age=25; Person.prototype.sayName=function(){ alert(this.name); }; //原型对象中的所有属性和方法 都会自动被所有实例所共享 var person1=new Person(); var person2=new Person(); person1.sayName();//Tom person2.sayName();//Tom alert(person1.__proto__===Person.prototype);//true
以上述的示例代码为例,各个对象之间的关系如下图所示:
总结:
①只要创建了一个函数,该函数的原型对象也随之同时被创建出来,原型对象中的属性和方法被经由其相对应的构造函数所创建的实例所共享
②每个函数在创建之后都会获得一个prototype的属性,这个属性指向该函数的原型对象
③每个对象的__proto__属性都指向其构造函数的原型
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库