JS - 关于改变Javascript的作用域链

关于Javascript静态作用域的一些心得。

之前在看JS大牛BYVoid的<<NodeJS开发指南一书>>时, 学习到了最能说明Javascript静态作用域特性的代码, 如下:

var scope = "global";
function f1() {
    console.log(scope);
}
f1() // output: global
function f2() {
    scope = "f2"
    f1();
}
f2(); // output: global

第一次输出“global”, 

是因为f1()函数找到父级执行作用域下(全局作用域)有定义全局变量scope = “global“。

第二次输出”global“, 

因为JS静态作用域链的特性使得作用域链是在函数定义时候被决定的,而不是在调用时候被决定的。

所以在f2()函数中执行f1()函数的时候,f1()函数的父级作用域仍然是全局作用域,所以依然会输出“global”。


那如何在不改变f1函数的结构和定义的情况下,使得在f2函数中输出的scope的变量的值可以是“f2”呢

使用with。

var scope = "global";
function f1() {
    console.log(scope);
}
f1() // output: global
function f2() {
    scope = "f2"
    with(scope) {
        f1();
    }
}
f2(); // output: f2
with会改变其范围内的作用域链。

这里with把在其范围内的f1()函数的执行作用域链的父级作用域更改为了自己,

所以在执行f1()函数时,找到父级作用域链中scope定义为“f2”,

因此加入with后,第二次可以输出“f2”。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用以下方法来改变 uni-data-select 组件的样式: 1. 在样式文件中直接对组件进行修改。例如,你可以在样式文件中加入以下代码来改变组件的字体颜色: ```css .uni-data-select { color: red; } ``` 2. 在组件的标签上添加自定义属性,然后在样式文件中使用自定义属性来进行样式修改。例如,你可以在组件的标签上添加 `custom-class` 属性,然后在样式文件中使用该自定义属性来修改组件的样式: ```html <uni-data-select custom-class="my-class"></uni-data-select> ``` ```css .my-class { color: red; } ``` 3. 使用 JavaScript 代码动态修改组件的样式。例如,你可以使用 DOM 操作或者通过修改组件的属性来改变组件的样式。 以上是几种常用的修改 uni-data-select 组件样式的方法,你可以根据自己的需要选择适合的方法进行修改。 ### 回答2: uni-app是一款基于Vue.js的跨平台框架,可以同时开发多个平台的应用。对于uni-data-select这个扩展组件来说,我们可以通过修改样式来改变它的外观。 首先,在使用uni-data-select组件的页面中,可以使用`class`或者`style`属性来修改组件的样式。比如,添加一个`class`属性定义一个自定义样式类,然后在对应的样式文件中添加对应的样式规则。 举个例子,如果我们想改变uni-data-select的字体颜色,可以在页面组件中添加`class`属性: ``` <uni-data-select class="my-custom-class"></uni-data-select> ``` 然后在对应的样式文件(比如App.vue文件下的style标签中或者组件内部的style标签中)中定义my-custom-class的样式规则: ```css .my-custom-class { color: red; } ``` 上述代码表示将uni-data-select组件中选项的文字颜色设置为红色。 除了修改文字颜色,我们还可以通过修改其他样式属性来改变uni-data-select组件的样式。例如,可以通过调整组件的边框颜色、背景色、文字大小等属性来改变其外观。 总的来说,通过添加class属性和对应的样式规则,我们可以在uni-app中改变uni-data-select组件的样式。当然,具体的修改还需要根据实际需求来确定。 ### 回答3: uni-data-select是uniapp框架的扩展组件之一,用于创建下拉框。要改变uni-data-select的样式,可以通过修改其相关的CSS来实现。 首先,需要在uni-data-select所在的vue文件或者全局的App.vue文件中,找到对应的样式类名或者id名。可以通过查看uni-data-select组件的文档或者查看组件的源代码来确定样式类名或id名。 接下来,可以在样式表文件(通常是在页面的style标签中或者是在全局的App.vue文件的style标签中)中添加对应的样式来修改uni-data-select的样式。可以使用常用的样式属性,如font-size、color、background-color等来修改文本的大小、颜色和背景色。可以使用width和height来修改下拉框的宽度和高度。 样式的修改示例: ```css /* 修改下拉框的文本颜色和背景色 */ .uni-data-select { color: red; background-color: yellow; } /* 修改下拉框的宽度和高度 */ .uni-data-select .uni-data-select-value { width: 200px; height: 30px; } ``` 修改完样式后,重新编译运行uniapp项目,就可以看到uni-data-select组件的样式已经被修改了。 需要注意的是,uniapp框架中的组件样式作用域是组件封装内部的,所以需要确定uni-data-select组件的样式类名或者id名,并在对应的作用域内添加样式。如果想要修改全局的样式,可以在App.vue文件中添加相应的全局样式,或者通过封装一个uni-data-select的子组件,来自定义uni-data-select的样式。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值