js高级 原型对象 显性原型对象与隐性原型对象 原型链

news/2024/7/11 1:53:17 标签: javascript, 前端, es6

原型对象,是用来解决构造函数在创建实例的时候,防止重复执行所导致的性能的降低(这里主要指占用内存),来为服用带来方便

如果在构造函数上添加一个方法 当你每次调用这个构造函数的时候都会调用里面的方法如果用原型对象的话就不用反复调用

每个函数都有一个prototype属性,他默认指向一个object空对象(实例)原型对象

javascript"><script>
    function fun(age) {
        //添加一个name属性让name属性等于传过来的name参数
         this.age = age
    }
   const a= new fun()
   console.log(fun.prototype);
</script>

在这里插入图片描述

constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
它实际上就是等于这个函数的
在这里插入图片描述

显性原型对象与隐性原型对象

prototype这个是显性原型对象 __proto__是隐性原型对象

注意 构造函数上有 prototype和__proto__属性而他的实例上没有prototype属性只有__proto__这个属性

javascript">   function fun(age) {
        //添加一个name属性让name属性等于传过来的name参数
         this.age = age
    }
   const a= new fun()
   console.log(fun.prototype);
   console.log(fun.__proto__);
   console.log(a.prototype);
   console.log(a.__proto__);

在这里插入图片描述
而且他的实例上的__proto__和他的构造函数上的prototype是一样的

***其实当你调用某些方法比如像onclick事件就是它定义好的事件都是在原型上定义的 ***

原型链

看一段代码

javascript"><script>
 function fun(){
     this.test1=function(){
         console.log("test1");
     }
 }
 fun.prototype.test2=function(){
     console.log("text2");
 }
 const a=new fun()
 a.test1()
 a.test2()
 a.toString()
 a.test3()
</script>

在这里插入图片描述
这里test和test2都能找到因为他们一个添加到构造函数上一个添加到了原型对象上
那为什么没有定义tostring和test3,tostring没报错test3确报错了因为tostring在原型链上

原型链理解
在这里插入图片描述
当要找一个方法时他会先在这个构造函数上面找,如果找不到就会去他的原型对象上面找如果还找不到他就回去object空实例对象(其实是实例对象的__proto__,实例的__proto__===构造函数的prototype,prototype指向objeect)上面找
在这里插入图片描述
这个空object空实例对象指向一个object原型对象 就相当于 object.prototype(每个函数都有prototype)它里面还有很多方法tostring就是一个如果 object.prototype再找不到就会接着去__proto__上面找而object的原型对象的__proto__是null所以就找不到test3


http://www.niftyadmin.cn/n/1371682.html

相关文章

函数原型实例关系图

总的来说就是这样 关于Function 1.所有的函数都是Function的实例对象 也就是说所有的 函数.protoFunction.prototype 关于object 1.所有的函数的原型对象都是object实例对象 &#xff08;但Object不满足&#xff09; 也就是说 函数.prototype.protoobject.prototype&#xff…

原型属性 instanceof

原型属性 1.查找对象的属性时&#xff0c;会自动到原型链中查找 2.设置对象的属性时不会查找原型链&#xff0c;如果当先对象没有此属性&#xff0c;直接添加此属性并设置其值 3.方法一般定义到原型两种属性一般通过构造函数定义再对象本身上 就是当在构造函数中定义一个方法时…

变量提升与函数提升 执行上下文

当函数或者js执行时会进行预处理操作 变量提升 预处理时候会进行变量的预处理也就是变量的提升&#xff0c;就是把变量提取出来赋值为underfind 函数提升 预处理时会把函数执行&#xff08;函数提升&#xff09; this指向window 块级变量优先于全局变量 当执行函数时也…

执行上下文栈 执行上下文栈面试题

执行上下文栈 <script> let a; function fun(a){this.aafunction fun2(){console.log("我是fun2");} }a10 fun(10) console.log(a); </script>进行预处理的时候会预处理函数&#xff0c;函数里面定义了b&#xff0c;但函数预处理和window预处理一样会把…

作用域 作用域链 作用域与上下文的区别

作用域 全局作用域和函数作用域 这个b和c就是在全局作用域里面打印a和b实在全局作用域里面函数作用域里面的访问不到全局作用域的变量可以访问到 在函数作用域里面可以访问他的函数作用域离得变量和他上一级的变量 访问只能访问本作用域的和他上一级的作用域里面的数据

闭包 js高级

闭包就是一个作用域能访问另一个函数的作用域的变量 有点像数据通信 <script>function a() {let a 5function b() {console.log(a);}b()}a() </script>这里就发生了闭包b函数访问了a函数的变量 函数外想要访问函数内部的数据 <!DOCTYPE html> <html la…

var、let、const 的区别 以及for循环 let和var输出不一样问题

var、let、const 的区别 一、var声明的变量会挂载在window上&#xff0c;而let和const声明的变量不会 var a 100; console.log(a,window.a); // 100 100let b 10; console.log(b,window.b); // 10 undefinedconst c 1; console.log(c,window.c); // 1 undefined 1 2 3 4 5 …

Linux命令从入门到实战 ----进程管理

文章目录kill终止进程pstree查看进程树netstat网络状态和端口占用信息crontab定时任务进程(process): 是正在执行的一个程序或命令&#xff0c;每一个进程都是一个运行的实体&#xff0c;都有自己的地址空间&#xff0c;并占用一定的系统资源 服务(service)&#xff1a;启动之后…