《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)

目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
135 52
|
19天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
25 1
JavaScript中对象的数据拷贝
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
1月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
75 1
|
1月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。

热门文章

最新文章