JS高级day03 —【函数的protptype、显式原型与隐式原型、原型链、变量提升与函数提升】

已于 2023-03-25 13:26:03 修改
阅读量343 收藏
点赞数
分类专栏： JS高级+es6 文章标签： 大数据
于 2022-07-18 10:34:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57726319/article/details/125601605
版权

目录

 

P15  15.尚硅谷_JS高级_函数的prototype  15:04

函数的prototype属性

给原型对象添加属性（一般都是方法）

P16  16.尚硅谷_JS高级_显式原型与隐式原型  28:34 

 P17 17.尚硅谷_JS高级_原型链  44:34

 P18 18.尚硅谷_JS高级_原型链_补充  10:29

 P19 19.尚硅谷_JS高级_原型链_属性问题  11:53

P20 20.尚硅谷_JS高级_探索instanceof  20:23

P21 21.尚硅谷_JS高级_原型_面试题  19:15

P22 22.尚硅谷_JS高级_变量提升与函数提升  10:02

1、变量声明提升

2、函数声明提升

3、问题：变量提升和函数提升是如何产生的

P23 23.尚硅谷_JS高级_执行上下文  21:48

1.代码分类（位置）

2.全局执行上下文

3.函数执行上下文

P24 24.尚硅谷_JS高级_执行上下文栈  17:25

P25 25.尚硅谷_JS高级_面试题  19:49

P15  15.尚硅谷_JS高级_函数的prototype  15:04

函数的prototype属性

  • 每个函数都有一个prototype属性，它默认指向一个Object空对象（即成为：原型对象）
  • 原型对象中有一个属性：constructor，它指向函数对象

给原型对象添加属性（一般都是方法）

  • 作用：函数的所有实例对象自动拥有原型中的属性（方法）
  • 我自己的理解就是，原型对象类似于组件，修改组建，所有实例也一样修改

构造函数和原型对象相互引用

 

P16  16.尚硅谷_JS高级_显式原型与隐式原型  28:34 

  1. 每个函数function都有一个prototype，即显式原型
  2. 每个实例对象都有一个__proto__，即隐式原型
  3. 对象的隐式原型的值为其对应构造函数的显式原型的值
  4. 内存结构（图）
  • 总结
    •   函数的prototype属性：在定于函数时自动添加的，默认值是一个空Object对象
    • 对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
    • 程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）

 第4点的图示 

重点总结：实例对象的隐式原型都指向构造函数的显示原型

 P17 17.尚硅谷_JS高级_原型链  44:34

1.原型链（图解）

  • 访问一个对象的属性时，
    • 先在自身属性中查找，找到返回
    • 如果没有，再沿着__proto__这条链向上查到，找到返回
    • 如果最终没找到，返回undefined
  • 别名：隐式原型链
  • 作用：查找对象的属性（方法）

2.构造函数/原型/实体对象的关系（图解）

3.构造函数/原型/实体对象的关系（图解2）

所有函数的__proto__都是一样的

 P18 18.尚硅谷_JS高级_原型链_补充  10:29

  • 函数的显示原型指向的对象默认是空Object实例对象（但Object不满足）

  • 所有函数都是Function的实例 （包括Function）

//true

  • Object的原型是原型链尽头

 P19 19.尚硅谷_JS高级_原型链_属性问题  11:53

读取对象的属性值时：会自动到原型链中查找

设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值

方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

P20 20.尚硅谷_JS高级_探索instanceof  20:23

1.instanceof是如何判断的？

  • 表达式：A instanceof B
  • 如果B函数的显式原型对象在A对象的原型链上，返回true，否则返回false

案例1

<script>
        function Foo() {

        };
        var f1 = new Foo();
        console.log(f1 instanceof Foo);//true
        console.log(f1 instanceof Object);//true
    </script>

 案例2

console.log(Object instanceof Function); //true
        console.log(Object instanceof Object); //true
        console.log(Function instanceof Function); //true
        console.log(Function instanceof Object); //true

        function Foo() {

        };
        console.log(Object instanceof Foo); //false

2.Function是通过new自己产生的实例

P21 21.尚硅谷_JS高级_原型_面试题  19:15

案例1

案例2 

 看上面图解

只有f.b（）输出  undefined

P22 22.尚硅谷_JS高级_变量提升与函数提升  10:02

1、变量声明提升

  • 通过var定义（声明）的变量，在定义语句之前就可以访问到
  • 值：undefined

面试题：输出 undefined

<script>
        var a = 3
        function fn() {
            console.log(a);
        }
        fn()//3
    </script>

 这样写，输出3，正常执行

<script>
        var a = 3
        function fn() {
            console.log(a);
            var a = 4
        }
        fn() //undefined
    </script>

 函数执行，先从内部执行，var a =4，执行顺序是，先在函数内部声明了a：var a，但是没有赋值，即输出，最后才赋值：a = 4，因此输出undefined，如图所示

<script>
        var a = 3
        function fn() {
            var a;
            console.log(a);
            a = 4
        }
        fn() //undefined
    </script>

2、函数声明提升

  • 通过function声明的函数，在之前就可以直接调用
  • 值：函数定义（对象）

 fn3属于变量提升，因此不能提前调用

3、问题：变量提升和函数提升是如何产生的

P23 23.尚硅谷_JS高级_执行上下文  21:48

1.代码分类（位置）

  • 全局代码
  • 函数（局部）代码 

2.全局执行上下文

  • 在执行全局代码前将window确定为全局执行上下文
  • 对全局数据进行预处理
    • var定义的全局变量==>undefined，添加为window的属性 
    • function声明的全局函数==>赋值（fun），添加为window的方法
    • this==>赋值（window）
  • 开始执行全局代码

  •  只能存在一个

3.函数执行上下文

  •  在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟的，存在于栈中）
  • 对局部数据进行预处理
    • 形参变量==>赋值（实参）==>添加为执行上下文的属性
    • arguments==>赋值（实参列表），添加为执行上下文的属性
    • Var定义的局部变量==>undefined，添加为执行上下文的属性
    • func声明的函数==>赋值（fun），添加为执行上下文的方法
    • this==>赋值（调用函数的对象）
  • 开始执行函数体代码

注意：函数不调用就不会创建  函数执行上下文

P24 24.尚硅谷_JS高级_执行上下文栈  17:25

  1. 在全局代码执行前，JS引擎就会创建一 个栈来存储管理所有的执行上下文对象
  2. 在全局执行上下文(window)确定后， 将其添加到栈中(压栈)
  3. 在函数执行上下文创建后，将其添加到栈中(压栈)
  4. 在当前函数执行完后,将栈顶的对象移除(出栈)
  5. 当所有的代码执行完后，栈中只剩下window

 

 至多存在N+1个执行上下文

f1（）
 f2（）
 f3（）
 //至多存在3个（2个函数执行上下文+1个全局执行上下文）
//因为执行f3的时候，f2执行结束将会被释放

f1（）{
    f2（）{
        f3（）{
        }
    }
}
//至多存在4个（3个函数执行上下文+1个全局执行上下文）

P25 25.尚硅谷_JS高级_面试题  19:49
 

<script>
        console.log('gb:' + i);
        var i = 1;
        foo(1);

        function foo(i) {
            if (i == 4) {
                return
            }
            console.log('fb:' + i);
            foo(i + 1)
            console.log('fe:' + i);
        };
        console.log('ge:' + i);
        //undefined   gb:1  fb:2  fb:3  fe:3  fe:2  fe:1  ge:1
    </script>

        

 

原因：c不是个函数，真正执行过程

养只羊驼妮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript中的原型解析【推荐】
01-21
我们知道js中函数亦是一种对象，当我们创建一个函数时，其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原型属性，他是一个指针，指向了这个函数的原型对象，这个原型对象有一个默认的属性叫做...
原型与原型链
m0_66451927的博客
07-06 82
原型与原型链
早期尚硅谷-avaScript笔记（函数调用、数据类型判断、原型链、闭包、对象创建、继承)
最新发布
licongmingli的博客
11-24 35
-函数对象有显式原型属性（prototype），定义函数时自动添加，默认值是一个空的Object实例对象（Object不满足）--实例对象有隐式原型属性（--proto--），创建对象是自动添加，默认值是构造函数的prototype属性值。--原型链是用来干嘛的？-function声明的函数 ===> 赋值（fun），添加为执行上下文的属性。-arguments ====> 赋值（实参列表），添加为执行上下文的属性。-形参变量 ====> 赋值（实参数据） ==> 添加为执行上下文的属性。
JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】
upward
01-28 550
函数的prototype、显式原型与隐式原型、原型链
JsBOM和DOM、var let const、变量提升函数提升、闭包、回调函数、原型原型链
m0_53328239的博客
03-12 1277
DOM和BOM DOM是操作文档出现的API，document为其中的一个对象； BOM是为了操作浏览器出现的API，window为其中的一个对象； 简单来说BOM就是操作上图A区的，DOM就是操作上图B区的 ​ 常用的BOM对象为： window（重要）window 代表 浏览器窗口 Navigater,封装了浏览器的信息 screen代表屏幕尺寸 location 代表当前页面的URL信息。 history 代表浏览器的历史记录 常用的DOM对象为： document代表..
js高级学习笔记（b站尚硅谷）-9-原型链相关知识
weixin_42349568的博客
08-03 246
一，函数的prototype属性 每个函数都有一个prototype属性，它默认指向它的原型对象 而原型对象中，又有一个属性constructor,它指向原本函数对象。也就是说函数和它的原型对象之间相互引用。 <script type="text/javascript"> console.log(Date.prototype) //Object console.log(Date.prototype.constructor===Date) //true </
关于JS中的prototype介绍
xiaoweids的博客
06-07 2889
转自：微点阅读 https://www.weidianyuedu.comJS中的phototype是JS中比较难理解的一个部分本文基于下面几个知识点:1 原型法设计模式在.Net中可以使用clone()来实现原型法原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。2 javascript的方法可以分为三类：a 类方法b 对象方法c 原型方法例子：function People(name){this.name=name;//对象方法this.I
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
热门推荐
码飞_CC的博客
07-25 18万+
  作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _）。   现在正式开始！让我们从如下一个简单的例...
透彻解读prototype与__proto__
@黄小泽的个人博客
01-31 7740
请先看一看关于 prototype 与 __proto__ 的一些使用情况代码： function Person() {} // (1).Fun.prototype.* Person.prototype.a = function() { console.log("a"); } // (2).Fun.prototype.__proto__.* Person.prototype.__p...
面试题1205
w_cyj的博客
12-05 116
mixin 局部混入和全局混入； 局部混入： 顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效； //这里注意：属性名为mixins，值为数组类型 mixins:[mixin], 由此，我们可以知道mixin混入对象的变量是不会共享的；也就是你page1发生了变化，并不会通知mixin进行实时刷新数据，发生的变化只会在page1.vue中生效，不影响其他组件； 全局混入： 全局混入我们只需要把mixin.js引入到main.js中，
JavaScript prototype 使用介绍
weixin_34221073的博客
07-12 2834
JavaScript prototype 使用介绍 用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱 用过JavaScript的同学们肯定都对prototype如雷...
__proto__和prototype
dehunying8835的博客
10-18 142
如图所示，m是Parent构造函数的实例，每个实例都有一个__proto__属性指向构造函数的原型即Parent.prototype Parent.prototype中的constructor会指向构造函数Parent protptype：构造函数的属性，指向构造函数的原型对象 __proto__：构造函数的实例拥有的属性，指向构造函数的原型 ↓es6中建议对...
浅析prototype、__protp__和constructor
SCUhzs
09-04 311
文章目录前言new背后的原理`__proto__`属性分析作用Object.prototypeprototype属性分析作用prototype 如何产生修改一个对象的prototype会发生什么？constructor属性分析作用总结参考资料 前言 诶，人不努力，那又和大学生有什么区别呢？（别骂了别骂了） 相信很多像我这样的编程小白在入门js一段时间后，对JS中的prototype、__proto__与constructor这三个属性存在许多困惑。接下来我将分享一下我个人做的一些笔记。 其实说实话，这
【前端学习之路】 JavaScript高级部分 尚硅谷学习笔记
a123456_9的博客
07-12 2768
用来保存多个数据的容器便于统一管理多个数据属性：属性名（字符串）和属性值（任意）组成方法：一种特别的属性（属性值是函数）实现特定功能的n条语句的封装体提高代码复用性便于阅读交流①自己定义的 ②不用手动调 ③最终执行的 满足这三点的都是回调函数常见的回调函数：a.dom事件回调函数b.定时器回调函数c.ajax请求回调函数 d.生命周期回调函数作用：①隐藏实现 ②不会污染外部（全局）命名空间 ③用来编写JS模块每个函数都有一个prototype属性（显示原型），这个属性默认指向一个Objec
Js高级尚硅谷版本
m0_61927991的博客
07-22 250
可变化的量，有变量名和变量值组成，每个变量都有一个内存，变量值就是内存中保存的数据。*Array一种特别的对象（数字下标，内部数据是有序的）*结束前，让对象成为垃圾对象（将被垃圾回收器回收）*Function一种特别的函数（可执行）*存储在内存的特定信息本质是01010101。*内存用来存储数据，变量是内存的标识。*初始赋值表名将要赋值为对象。*可存储数据的空间（临时的）*一个对象代表现实的一个物体。*属性属性名和属性值组成。*用来保存多个数据的容器。*方法一种特别的属性。......
前端面试题考点HTML5+CSS3+JS
luemeon的博客
04-26 1万+
变量声明不开辟内存,只是告诉编译器,要声明的部分存在,要预留部分的空间。var i;变量定义开辟内存。var i=123;
js高级学习笔记（b站尚硅谷）-16-原型链的继承
weixin_42349568的博客
08-04 167
想要子类型继承父类型的方法， 就变更子类型的原型对象为父类型的一个实例对象即可 Sub.prototype=new Sup(); 这样既不会污染父类型的原型链，又可以继承父类型原型链上的方法或属性 <script type="text/javascript"> //父类型 function Sup(){ this.name="父类型" } Sup.prototype.showName=function(){ alert(this.name) }
jQuery 属性操作 attr porp
qq_38318589的博客
09-02 362
1.attr jQuery对象.attr('属性名'); //获取属性 jQuery对象.attr('属性名','属性值'); //设置类名 jQuery对象.removeAttr('属性名'); //删除属性 jQuery对象.attr('属性名:属性值','属性名:属性值'); //批量设置类名 ...
JavaScript相关知识点
hff945的博客
03-28 684
1、请用 js 去除字符串空格？ 答案：replace 正则匹配方法、str. trim()方法、JQ 方法：$. trim(str)方法 解析： 方法一：replace 正则匹配方法 去除字符串内所有的空格：str = str. replace(/\s*/g, “”); 去除字符串内两头的空格：str = str. replace(/^\s|\s$/g, “”); 去除字符串内左侧的空格：str = str. replace(/^\s*/, “”); 去除字符串内右侧的空格：str = str. repl
函数的prototype
weixin_45065272的博客
10-12 233
函数的prototype： /**函数的prototype * 函数都有一个prototype属性，它指向原型对象 * 原型对象中有一个constructor属性，它指向函数对象 * 给原型对象添加属性： * 函数的实例对象继承原型中的属性 */ console.log(Date.prototype, typeof...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值