javaScriptna_01那些事儿

javaScriptna那些事儿

作用域

JS的作用域简单来说就是变量(变量作用于又称上下文)和函数生效(能被访问)的区域
### 1.全局作用域
函数之外声明的变量,会成为全局变量。
变量在程序的任何地方都能被访问,表示它是全局变量,window 对象的内置属性都拥有全局作用域。
#### 自动全局
如果您为尚未声明的变量赋值,此变量会自动成为**全局变量**
### 2.函数作用域
**在固定的代码片段(函数)才能被访问**
**函数作用域就是一个独立的地盘,让变量不会外泄、暴露出去**。也就是说**作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。**
变量取值:**到创建 这个变量 的函数的作用域中取值**

3.作用域链

变量取值到 创建 这个变量 的函数的作用域中取值。

但是如果在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

作用域链



二、this指向

二、this指向

在函数内,this是非常特殊的关键词标识符,在每个函数的作用域中被自动创建

当函数被调用,一个上下文就被创建。上下文包括函数在哪调用,谁调用的,参数是哪些,等等,上下文中的this,指的就是函数指行期间的this。this的上下文基于函数调用的情况。和函数在哪定义无关,但是和函数怎么调用有关

this理解的关键:

1:this永远指向一个对象;

2:this的指向完全取决于函数调用的位置;

1、全局

在全局上下文(任何函数以外),this指向全局对象。

console.log(this === window); // true

2、函数

在函数内部时,this由函数怎么调用来确定

//简单调用,即独立函数调用
function f1(){
return this;
}
//当前调用者其实是window window.f1()
f1() === window;

当函数作为对象方法调用时,this指向该对象

var obj = {
type: 1,
name: 'raymon',
age: 20,
sayHi:function(){
console.log(this)
console.log('hi~~')
}
}
//this === obj
obj.sayHi()

3.构造函数

构造函数的this指向创建的实例对象

function Obj (name,age){
this.name = name
this.age = age
this.sayHai= function(){
console.log(this)
}
}
let o = new Obj('raymon'20)

构造函数执行过程分为4步:

第一步: 创建一个Object对象实例。
第二步: 将构造函数的执行对象赋给新生成的这个实例。
第三步: 执行构造函数中的代码
第四步: 返回新生成的对象实例

function Obj (name){
this.name = name
return name
}
let o = new Obj('raymon')

构造函数在new的时候,会默认创建一个空的 { },并且把构造函数的prototype赋值给空对象的__proto__,当构造函数返回值不是对象时,返回值就会默认成构造函数自己创建的对象

4.call和apply

callapply可以指定函数运行时的this

call方法使用的语法规则
函数名称.call(obj,arg1,arg2...argN);
参数说明:
obj:函数内this要指向的对象,
arg1,arg2...argN :参数列表,参数与参数之间使用一个逗号隔开

apply方法使用的语法规则

函数名称.apply(obj,[arg1,arg2...,argN])
参数说明:
obj :this要指向的对象
[arg1,arg2...argN] : 参数列表,要求格式为数组

function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

posted @   Raymon撸码记  阅读(16)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示