理解javascript中的function与new Function的区别

本文详细解析了JavaScript中构造函数和new操作符的使用方式,通过实例展示了构造函数如何为新对象提供prototype对象,并解释了构造器名称首字母大写的规则。文章深入探讨了函数作为构造器时的行为差异,以及如何利用prototype属性实现对象的继承和扩展。
        javascript函数能通过new操作符来调用构造器,比如new Chenqiguo()。就其定义而言,和普通的函数没有任何区别。事实上区别在于:当函数调用new操作符时,javascript为它提供了一个prototype对象;而当函数被用作构造器构建新的对象时,其内部的[[prototype]]属性就成为了被构建对象的引用
        
        这句话是什么意思呢,我们先来看下面的代码
        function Chenqiguo(){
            alert('qiguo');
        }
        Chenqiguo()和new Chenqiguo()出来的效果都是一样的,都会打印qiguo这个字符串,而把代码换成如下的方式的话:
        function Chenqiguo(){
            alert('qiguo');
        }
        Chenqiguo.prototype.getName = function(){
            alert('prototype qiguo');
        }
        我们分别用new实例化构造函数和用普通的函数执行对原型求值
        var chenqiguo = new Chenqiguo();//打印qiguo
        chenqiguo.getName(); //打印prototype name
        var name = Chenqiguo();  //打印qiguo
        name.getName();  //会报错, name is undefined
        
        可以看到当我们用new 操作符创建的对象的时候能够打印原型上的值,而用常规函数的时候却不能,这样就解释了在我们当把函数当作构造函数创建新的对象的时候,其内部的prototype属性成为了被创建对象的一个引用.
        
        抛开语言层次来观察函数和构造器的话,构造器的名称通常都使用首字母大写的形式来表表明其是一个构造函数,用小写字母的话就表示其是一个普通的函数.作为javascript的开发人员来说,应该严格区分这两种情况,如果是构造器就首字母大写,否则首字母就小写
### JavaScript 中 `function` 的用法相关概念 在 JavaScript 中,`function` 是一种非常重要的构造,它既可以作为普通的逻辑代码容器(类似于其他语言中的函数),也可以作为对象使用。以下是关于 `function` 的定义、用法及示例的详细介绍。 #### 1. `function` 作为普通函数 `function` 可以像传统编程语言中的函数一样被定义调用。其基本定义方式如下: ```javascript function functionName([argument1] [, argument2] [..., argumentN]) { [statements] } ``` 具体有以下几种写法: - **定义式**:直接通过 `function` 关键字定义。 ```javascript function add(x, y) { return x + y; } console.log(add(2, 3)); // 输出 5 [^1] ``` - **表达式式**:将匿名函数赋值给变量。 ```javascript var multiply = function(x, y) { return x * y; }; console.log(multiply(2, 3)); // 输出 6 [^3] ``` - **命名表达式**:为函数表达式赋予一个内部名称。 ```javascript var factorial = function fact(n) { return n <= 1 ? 1 : n * fact(n - 1); }; console.log(factorial(5)); // 输出 120 [^3] ``` #### 2. `function` 作为对象JavaScript 中,每个函数实际上都是一个对象,因此可以将其视为一种特殊的对象类型。这种特性使得函数可以拥有属性方法,并且可以通过多种方式操作。 - **动态创建函数**:通过 `Function` 构造函数动态生成函数。 ```javascript var dynamicFunc = new Function('x', 'y', 'return x + y;'); console.log(dynamicFunc(3, 4)); // 输出 7 [^4] ``` - **函数的属性方法**: - `prototype`:每个函数都有一个 `prototype` 属性,用于支持原型继承。 ```javascript function Person(name) { this.name = name; } Person.prototype.greet = function() { console.log(`Hello, my name is ${this.name}.`); }; var john = new Person('John'); john.greet(); // 输出 "Hello, my name is John." [^2] ``` - `apply` `call`:用于显式指定函数调用时的 `this` 值。 ```javascript var obj = { value: 42 }; function getValue() { return this.value; } console.log(getValue.call(obj)); // 输出 42 [^2] console.log(getValue.apply(obj)); // 输出 42 [^2] ``` #### 3. 特殊的 `this` 关键字 `this` 的值取决于函数的调用方式,而不是定义方式。以下是几种常见的场景: - 在全局上下文中,`this` 指向全局对象(浏览器中为 `window`)。 - 在对象方法中,`this` 指向调用该方法的对象。 - 使用 `call` 或 `apply` 时,`this` 被显式指定。 - 在箭头函数中,`this` 继承自定义它的作用域。 ```javascript var globalValue = 'global'; var obj = { value: 'local', getValue: function() { return this.value; } }; console.log(obj.getValue()); // 输出 'local' [^1] function testThis() { console.log(this.globalValue); } testThis(); // 输出 'global' [^1] ``` ### 示例代码总结 ```javascript // 定义式 function greet(name) { return `Hello, ${name}!`; } console.log(greet('Alice')); // 输出 "Hello, Alice!" // 表达式式 var subtract = function(a, b) { return a - b; }; console.log(subtract(10, 5)); // 输出 5 // 动态创建函数 var power = new Function('base', 'exponent', 'return Math.pow(base, exponent);'); console.log(power(2, 3)); // 输出 8 // 使用 prototype function Animal(type) { this.type = type; } Animal.prototype.describe = function() { return `This is a ${this.type}.`; }; var dog = new Animal('dog'); console.log(dog.describe()); // 输出 "This is a dog." ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值