《JS原理、方法与实践》- JS function 类型对象

简介: 《JS原理、方法与实践》- JS function 类型对象

在JS中,function可以说是最核心的内容了。**它本身是一种对象,另外,它还可以创建对象, 而且可以对对象操作**

###### function的作用:

1. 作为对象来管理其中的属性

2. 作为方法处理具体业务

3. 创建对象

#### 一、创建function

###### 1. 函数声明, 结构如下:

```

function 函数名(参数){函数体}

```

举例:

```

function say (what){console.log(`say ${what}`)}

say('hello');

```

![](https://upload-images.jianshu.io/upload_images/2789632-364db50cb963ed98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###### 2.函数表达式, 结构如下:

```

var 变量名 = function(参数){函数体}

```

举例:

```

var say = function(what){console.log(`sya ${what}`);}

say('hello');

```

![](https://upload-images.jianshu.io/upload_images/2789632-981fd4696507d9ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###### 其实,通过函数声明方式创建函数时,JS在背后自动帮用户做了这件事,它首先创建了函数对象,然后又创建了跟函数名同名的变量,并将创建出来的函数赋值给了这个变量。即:

```

function F(a){}

var f = F;

```

###### 通过函数表达式来创建其实道理也差不多,不同之处在于它会创建一个匿名函数,然后再赋值给定义的变量。即:

```

var anonymous = function (b) {}

var anony = anonymous;

```

#### 二、用作对象

JS种的函数本身也还是对象,是对象就可以有自己的属性。

举例:

```

function func() {};

func.val = 'go';

func.logVal = function(){

 console.log(this.val);

}

func.logVal();

```

![](https://upload-images.jianshu.io/upload_images/2789632-2130f1f290473005.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### 三、处理业务

相关概念:

* JS是弱类型语言

* JS的变量使用var关键字来定义,当然ES6提出了使用let, const可以用来定义变量。

* var 定义的变量的作用域,这种变量的作用域是function级的。

* 严格模式(strict model): ES5种引入了严格模式,严格模式下的JS程序需要比非严格模式下的程序更加规范,对语法有了比较严格的要求。

* == 与===: ==比较转换后的值是否相等,===比较如果类型不同就会返回false。

* for-in语句:可以便利对象的**属性**, 准确的来说是便利对象中可以遍历的属性。

* for-of语句: 它可以直接获取属性的值。

* try-catch-finally语句: catch(error)中的error有两个属性: error.name, error.message。

* typeof语句:语法:typeof 变量,ES2015的返回值一共有7种: undefined、function、object、boolean、number、string、symbol;

* null和数组类型都是object,因为努力了本身也是一个对象,而数组可以包含其他任何类型的元素,它并不是底层对象,所以它们没有自己独有的类型;、

* 只要有名字但是没有赋值的变量都是undefined类型。

* instanceof 语句:instanceof语句比typeof语句更进了一步,可以判断一个对象是不是某种类型的实例。instanceof语句的返回值未布尔类型,表示判断是否正确。

举例:

```

function testFunc () {

 try{

   var a = 'hello';

   if(typeof a === 'string'){

     console.log(a);

   }else{

     console.log('a is not string');

   }

 }catch(error){

   console.log(error.name);    console.log(error.name);

   console.log(error.message);

 

 }finally{

   console.log('final');

 }

}

testFunc();

```

![](https://upload-images.jianshu.io/upload_images/2789632-d842a2d42ecda277.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### 四、创建对象

对于一个function类型的对象,使用new便是对象,不使用便是函数。一般是对象的话,首字母大写,方法首字母小写。

举例:

```

function F(){

 this.v = 1;

}

var obj = new F();

console.log(obj.v);

```

![](https://upload-images.jianshu.io/upload_images/2789632-55975fb82a573465.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###### 注意:

在使用function创建对象时需要注意一种特殊的情况,当function的函数体返回一个对象类型时,使用new关键字创建的对象就是返回的对象而不是function所对应的对象。

举例:

```

function F() {}

function Car(color){

 this.color = color;

 return new F();

}

var car = new Car('red');

console.log(car.color); // undefined

console.log(car instanceof Car); // false

console.log(car instanceof F); // true

```

![](https://upload-images.jianshu.io/upload_images/2789632-00be1ef4d702e059.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###### prototype属性与继承

* 基于对象的ES语言根本没有类的概念,当然也就不存在基于类的那种继承方式,但是它可以通过prototype属性类达到类似与继承的效果。

* prototype是ES中function类型对象的一个特殊的属性。每个function类型的对象都有prototype属性,prototype属性的值是object类型的对象。

* function创建的实例对象在调用属性时,会首先在自己的属性中查找,如果找不到就会去function的prototype属性对象中查找。但是,创建的对象只是可以调用prototype中的属性。但是并不会实际拥有那些属性,也不可以对它们进行修改(修改操作会在实例对象中添加一个同名的属性)。当创建的实例对象定义了同名的属性后就会覆盖prototype中的属性,但是原来的prototype中的属性并不会发生变化,而且当创建出来的对象删除了添加的属性后,原来的prototype中的属性还可以继续调用。

举例:

```

function Car(color){

 this.color = color;

}

Car.prototype.logColor = function(){

 console.log("prototype: " + this.color);

}

var car = new Car('red');

car.logColor(); //"prototype: red"

car.logColor = function(){

 console.log("property: " + this.color);

}

car.logColor(); // "property: red"

delete car.logColor;

car.logColor(); // "prototype: red"

```

![](https://upload-images.jianshu.io/upload_images/2789632-ba5d9b8fc52a6a8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

目录
相关文章
|
5月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
313 69
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
362 0
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
386 80
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
186 19
|
6月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
188 23
|
6月前
|
人工智能 Python
083_类_对象_成员方法_method_函数_function_isinstance
本内容主要讲解Python中的数据类型与面向对象基础。回顾了变量类型(如字符串`str`和整型`int`)及其相互转换,探讨了加法在不同类型中的表现。通过超市商品分类比喻,引出“类型”概念,并深入解析类(class)与对象(object)的关系,例如具体橘子是橘子类的实例。还介绍了`isinstance`函数判断类型、`type`与`help`探索类型属性,以及`str`和`int`的不同方法。最终总结类是抽象类型,对象是其实例,不同类型的对象有独特运算和方法,为后续学习埋下伏笔。
122 7
083_类_对象_成员方法_method_函数_function_isinstance
|
6月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
114 13
|
8月前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
329 58
|
5月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。

热门文章

最新文章