闭包和面向对象设计

对象以方法的形式包含了过程,而闭包则是在过程中以环境的形式包含了数据。通常用面向对象思想能实现的功能,用闭包也能实现。

如下这段闭包相关的代码:

var extent = function(){
    var value = 0;
    return {
        call: function(){
            value++;
            console.log( value );
        }
    }
};

var extent = extent();

extent.call();   //  输出: 1
extent.call();   //  输出: 2
extent.call();   //  输出: 3

换成面向对象的写法如下:

var extent = {
    value: 0,
    call: function(){
        this.value++;
        console.log(this.value);
    }
}

extent.call();   //  输出: 1
extent.call();   //  输出: 2
extent.call();   //  输出: 3

或者

var Extent = function(){
    this.value = 0;
}
Extent.prototype.call = function(){
    this.value++;
    console.log(this.value)
}

extent.call();   //  输出: 1
extent.call();   //  输出: 2
extent.call();   //  输出: 3
<think>嗯,用户想学习JavaScript的基础知识点,包括作用域、继承、闭包面向对象设计。我需要先整理这些概念的结构,确保每个部分都清晰易懂。首先,作用域是关键,要分清楚全局作用域函数作用域的区别,还有块级作用域在ES6中的引入。可能用户对变量提升暂时性死区不太了解,需要详细解释。接下来是闭包,这部分容易让人困惑。应该用简单的例子来说明闭包如何保留外部函数的变量引用,同时提到内存泄漏的问题,这样用户能意识到使用时需要注意的地方。然后是继承,JavaScript的基于原型的继承传统面向对象语言不同,用户可能对此不太熟悉。需要比较原型链继承、构造函数继承等方法,并指出ES6的class语法糖,这样用户能理解现代写法与传统原型的联系。 面向对象设计方面,要强调原型构造函数的作用,以及如何用ES6的class来简化。可能需要对比工厂模式构造函数模式的区别,帮助用户理解不同设计选择的影响。用户可能在学习过程中会遇到如何选择继承方式、闭包的应用场景等问题,所以生成的相关问题需要覆盖这些点,比如闭包的优缺点、ES6类与传统原型的区别等。同时,要确保引用正确的资料,比如提到的《JavaScript高级程序设计MDN文档,增加回答的可信度。最后,检查是否符合之前的系统级指令,比如数学公式的正确格式,但这里可能用不上。确保回答结构清晰,分点讲解,代码示例正确,并且相关的问题能引导用户深入思考。可能还需要注意避免术语堆砌,用更口语化的表达帮助理解。</think># JavaScript基础知识点解析 ## 一、作用域 ### 1. 作用域类型 - **全局作用域**:定义在函数外部的变量,如`var globalVar = 1;` - **函数作用域**:通过`var`声明的变量存在函数作用域提升 - **块级作用域**:ES6新增的`let/const`声明方式,如: ```javascript if (true) { let blockVar = 2; // 仅在块内有效 } ``` ### 2. 作用域链 函数执行时会创建作用域链,从当前作用域逐级向外查找变量。例如: ```javascript function outer() { let x = 10; function inner() { console.log(x); // 通过作用域链查找到x=10 } inner(); } ``` ### 3. 变量提升 `var`声明的变量会提升到作用域顶部,但赋值不提升: ```javascript console.log(a); // undefined var a = 5; ``` > 推荐阅读《JavaScript高级程序设计》第四章作用域相关内容[^1] ## 二、闭包 ### 1. 定义与特征 函数嵌套结构下,内部函数可以访问外部函数变量: ```javascript function createCounter() { let count = 0; return function() { return ++count; }; } const counter = createCounter(); console.log(counter()); // 1 ``` ### 2. 内存管理 闭包会导致外部函数变量无法被GC回收,需注意内存泄漏问题。可通过`WeakMap`优化引用管理[^2]。 ## 三、继承 ### 1. 原型链继承 ```javascript function Parent() { this.name = 'Parent'; } Parent.prototype.say = function() { console.log(this.name); } function Child() {} Child.prototype = new Parent(); ``` ### 2. 组合继承 ```javascript function Child() { Parent.call(this); // 构造函数继承 } Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; ``` ### 3. ES6类继承 ```javascript class Parent { constructor(name) { this.name = name; } } class Child extends Parent { constructor(name, age) { super(name); this.age = age; } } ``` ## 四、面向对象设计 ### 1. 构造函数模式 ```javascript function Person(name) { this.name = name; this.greet = function() { console.log(`Hello, ${this.name}`); } } ``` ### 2. 原型模式 ```javascript function Person(name) { this.name = name; } Person.prototype.greet = function() { console.log(`Hello, ${this.name}`); } ``` ### 3. 工厂模式 ```javascript function createPerson(name) { return { name, greet() { console.log(`Hello, ${this.name}`); } }; } ``` > 推荐MDN文档关于原型链的详细说明[^3]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值