原型&&原型链&&执行上下文

原型&&原型链

原型

​ 1.函数的prototype属性

​ |每个函数都有一个prototype属性,默认指向一个Object空对象(原型对象)

​ |原型对象中有一个constructor属性,指向函数对象

在这里插入图片描述

function Fun(){//ctrl+shift+L 重命名所有的Fun都被修改
    
}
console.log(Fun.prototype)  //object

console.log(Fun.prototype.consructor===fun) //true

​ 2.给原型函数添加属性(一般都是方法)

​ |作用:函数所有的实例对象自动拥有原型的属性(方法)

Fun.prototype.test = function(){
	console.log('test()')
}
var fun = new Fun()
fun.test()  //会输出test()

显式原型和隐式原型

​ 1.每个函数都有一个prototype属性=>显式原型(构造函数时添加的)

​ 2.每一个实例对象都有一个 proto =>隐式原型(创建对象时添加的)

​ 3.对象的隐式原型的值为对应构造函数显式原型的值

​ 定义构造函数 -> 创建实例对象 ->给原型添加方法 -> 通过实例调用(程序员能直接操作显式原型,不能直接操作隐式原型 ES6之前

function Fun(){
    
}
console.log(Fun.prototype)// Object 显式
var fun = new Fun()
console.log(fun.__proto__) //Object 隐式
console.log(Fun.prototype===fun.__prototype__)//true

在这里插入图片描述

原型链

​ |访问一个对象属性时,先在自身属性查找,若没有再沿着__proto__向上查找,原型链的尽头 -> Object的原型对象

​ |所有函数都是Function的实例,包括自身

function Fun(){
    this.test1 = function(){
        console.log('test1()') //给fun添加方法-> fun = Fun()
    }
}
Fun.prototype.test2 = function(){
    console.log('text2()')  //给Fun添加方法->直接Fun.prototype
}
var fun = new Fun()
fun.test1()//可输出
fun.test2()//可输出
console.log(fun.toString())//可输出 Object的原型对象有这个方法
fun.test3() //报错 未被定义

console.log(Object.prototype.__proto__) //null

在这里插入图片描述

​ |原型链的属性问题:读取对象的属性值:会自动到原型链中查找;设置对象的属性值:不会查找原型链,如果当前对象没有此属性,直接添加并赋值

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

function Fun(){
    
}
Fun.prototype.a = 'xxx'
var fun1 = new Fun()
cosole.log(fun1.a)// xxx

var fun2 = new Fun()
fun2.a = 'yyy'
console.log(fun2.a,fun1.a) //yyy  xxx

instanceof

​ |表达式:A instanceof B 如果B函数的显式原型链对象在A对象的原型链上,返回true,否则为false

function Foo(){ }
var f1 = new Foo()
console.log(f1 instanceof Foo) //true
console.log(f1 instanceof Object) //true

测试题

//测试题1
function A(){}
A.prototype.n = 1

var b = new A()
A.prototype = {
    n:2,
    m:3
} //创建一个新的对象赋值给A的prototype 但b还指向原来A的prototype

var c = new A() //指向新的A的prototype
console.log(b.n,b.m,c.n,c.m)  // 1 undefined 2 3
//测试题2
var F = function F(){}
Object.prototype.a = function(){
    console.log('a()')
}
Function.prototype.b = function(){
    console.log('b()')
}
var f = new F() //原型对象Object
f.a() //原型对象Object  Object里有a方法 ->输出aa(
f.b() //报错 undefined b方法在Function的prototype里 不能通过f->Function
F.a() //F看成实例对象 终点都为Object -> a()
F.b() //b()  可以通过F -> Function 找到b方法

变量提升与函数提升

变量提升

​ 通过var定义的变量,在定义语句前就可以访问,只不过值为undefined

函数提升

​ 通过function声明的函数,创建函数语句前就可以调用,值为函数定义对象

执行上下文

全局执行上下文

​ 1.在执行代码前将window确定为全局执行上下文

​ 2.对全局数据进行预处理

​ | var定义的全局变量=>undefined,添加为window的属性

​ | function声明的全局函数=>赋值(fun),添加为window的方法

​ | this=>赋值window

​ 3.开始执行代码

console.log(a1) //相当于window.a1 undefined
a2()  //a2()
console.log(this)  //window

var a1 = 3 //执行代码时 会直接从该行跳到console.log(a1) funtion a2()已经执行过了
function a2(){
    console.log('a2()')
}
console.log(a1) //3

函数执行上下文

每当调用一个函数时,一个新的执行上下文就会被创建出来

​ 1.在调用函数执行函数体前,创建对应的函数执行上下文对象( 虚拟的,存在栈中,保存了函数中的所有形参,实参,局部变量,this指针等函数执行时的函数内部的数据情况 )

​ 2.对局部数据进行预处理(封闭的区域

​ |形参变量 =>赋值(实参)=>添加为执行上下文的属性

​ |arguments =>赋值(实参列表)=>添加为执行上下文的属性

​ | var定义的全局变量=>undefined,添加为执行上下文的属性

​ | function声明的全局函数=>赋值(fun),添加为执行上下文的属性

​ |this =>赋值为调用函数的对象

3.开始执行函数体代码

function fn(a1){
    console.log(a1) //2
    console.log(a2) //undefined  此时a2还未被赋值
    a3() //a3()
    console.log(this) //window
    console.log(arguments) //伪数组  Arguments(2) [0]:2;[1]:3

	var a2 = 3 
	function a3(){
    	console.log('a3()') 
	}
}
fn(2,3)

执行上下文栈

1.在全局代码执行前,JS引擎会创建一个栈来储存管理所有的执行上下文对象

2.在全局执行上下文(window)确定后,将其添加到栈中(压栈)

3.在函数执行上下文创建后,将其压栈

4.当前函数执行完后,将栈顶对象移除

5.所有代码执行完,栈中只剩window

var a = 10 	               //1.进入全局执行上下文
var bar = function(x){
    var b = 5
    foo(x+b)              //3.进入foo函数执行上下文
}
var foo = function(y){
    var c = 5
    console.log(a+c+y)   //最后输出30
}
bar(10)	                   //2.进入bar函数执行上下文 
console.log('globle begin' + i)  //undefined
var i=1      
foo(1)
function foo(i){
    if(i==4){
        return;
    }
    console.log('foo() begin:'+i)
    foo(i+1) //递归
    console.log('foo() end:'+i)
}
console.log('globle end:'+i)
/*依次输出: 1.globle begin:undefined 2.foo() begin:1   3.foo() begin:2  4.foo() begin:3   5.foo() end:3    6.foo() end:2   7.foo() end:1  8.globle end:1

注意:先执行变量提升 后执行函数提升

function a(){}
var a
console.log(typeof a) //function
var c=1
function c(c){
    console.log(c)
}
c(2)  //会报错:c is not a function

//实际上代码是这样执行的
var c
function c(c){
    console.log(c)
}
c = 1  //此时c是一个变量,所以报错
c(2) 

执行函数提升

function a(){}
var a
console.log(typeof a) //function
var c=1
function c(c){
    console.log(c)
}
c(2)  //会报错:c is not a function

//实际上代码是这样执行的
var c
function c(c){
    console.log(c)
}
c = 1  //此时c是一个变量,所以报错
c(2) 
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值