js作用域、原型链

本文通过一系列函数调用示例,详细解析了JavaScript中不同方式调用函数时的行为差异,包括函数名与变量名冲突、原型链查找及new操作符的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在github上看到了一道题目。
function Foo() {
getName = function () { 
    console.log('1');
};
return this;
}
Foo.getName = function () {
console.log('2');
};
Foo.prototype.getName = function () { 
console.log('3');
};
var getName = function () { 
console.log('4');
};
function getName() { 
console.log(5);
}

Foo.getName();  
getName();  
Foo().getName(); 
getName();  
new Foo.getName(); 
new Foo().getName();   
new new Foo().getName();

分析输出结果

Foo.getName();  

输出结果:2
分析:Foo.getName()相当于访问Foo对象的一个属性。

getName();  

输出结果:4
分析:在变量名与函数名形同的情况下,给该变量赋值之后,与其同名的函数将被覆盖,不起作用。

Foo().getName(); 

输出结果:1
分析:Foo()将Foo()内的内容执行了一遍。Foo()执行之后相当于
全局变量

var getName = function(){return(4);}

Foo().getName()是指在Foo()执行之后,回到全局之中,再次调用getName()。但是Foo()执行的结果使 getName = function(){return(1);};,所以再次调用getName(),结果就是1。

new Foo.getName(); 

输出结果:2
分析:js里面所以变量都可以作为对象,所以 Foo.getName()本身也是一个对象,只是这个对象没有带任何的属性。从优先级来书相当于 (new (Foo.getName)()),所以调用的是 Foo.getName,输出2

new Foo().getName();  

输出结果:3
分析:用new的时候,Foo中的this是以Foo为原型的新创建的对象,所以调用的getName是 Foo.prototype中的那个。
此外 new 的返回值是,如果函数返回对象,那么返回值就是这个对象,否则返回this

new new Foo().getName();

输出结果:3
分析:new ((new Foo()).getName)(),同上,只是多加了一个 new,而new 只是改变了函数中this的值而已。

### JavaScript 中修改原型链作用域的影响及实现方式 在 JavaScript 中,原型链的修改不会直接影响词法作用域,因为两者属于不同的机制。词法作用域由函数定义的位置决定,而原型链则是用于属性查找的一种机制。 #### 1. 原型链的作用 当尝试访问一个对象上的某个属性时,如果该对象本身不存在这个属性,则会沿着它的 `[[Prototype]]` 链向上查找,直到找到为止或者到达链的末端(即 `null`)。这种行为可以通过修改对象的原型来改变属性查找的结果[^2]。 #### 2. 修改原型链的方式 以下是几种常见的修改原型链的方法: - **通过 `Object.create()` 创建新对象** 使用 `Object.create(proto)` 方法可以显式指定新对象的原型。 ```javascript const protoObj = { greet: function() { console.log('Hello from prototype!'); } }; const obj = Object.create(protoObj); obj.greet(); // 输出 'Hello from prototype!' ``` - **直接设置 `__proto__` 属性** 虽然不推荐这种方式,因为它已经被标记为废弃特性,但在某些环境中仍然有效。 ```javascript const newProto = {}; const obj = {}; obj.__proto__ = newProto; console.log(Object.getPrototypeOf(obj) === newProto); // true ``` - **使用 `Object.setPrototypeOf()` 方法** 这是一个标准方法,用来更改现有对象的原型。 ```javascript const obj = {}; const newProto = { value: 42 }; Object.setPrototypeOf(obj, newProto); console.log(obj.value); // 输出 42 ``` #### 3.作用域的影响 尽管可以修改原型链,但它并不会影响到词法作用域的行为。这是因为: - **词法作用域** 是静态的,在编译阶段就已经确定下来; - **原型链** 则是用来解决运行时属性查找的问题。 因此,即使改变了某对象的原型链,也不会对其内部闭包或嵌套函数所依赖的作用域产生任何影响[^1]。 #### 4. 实现示例 下面展示了一个例子,说明如何通过调整原型链间接影响程序逻辑: ```javascript function Person(name){ this.name = name; } Person.prototype.sayName = function(){ console.log(this.name); }; const personA = new Person('Alice'); personA.sayName(); // Alice // 动态修改原型链 delete Person.prototype.sayName; try{ personA.sayName(); }catch(e){ console.error("Method no longer exists:", e.message); } ``` 在这个案例里删除了原属於 `Person` 类型实例共享的一个方法,从而使得原本能够正常工作的功能失效了[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值