JavaScript进阶知识点——函数和对象详解

我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript

JavaScript函数

JavaScript函数和Java函数是有一部分相似的,所以学习起来也会相对简单

基本构造

1.直接构造

//function代表函数标志,name为函数名称,参数可有可无
function name( 参数 ) {
//...
return;
}

2.赋值构造

//相当于function为匿名函数,然后匿名函数所得出的值返回给name,因而name可以调用function函数
var name = function( 参数 ){
//...
}

注意:

  • 在JavaScript中,return是可有可无的
  • 当存在return时,运行到return,结束函数,并返回该值
  • 当不存在return时,全部运行完毕,结束函数,返回underfined值

调用函数方法

当调用函数时,直接书写函数名称并加上相对应的参数即可

name(参数);

注意:

  • JavaScript可以传入与之不对应的参数
  • 当参数传入较多,参数进入函数但不代表函数内任意参数,只是单纯传入参数
  • 当参数传入较少,参数进入函数,后面未传入的参数在函数内部以underfined的形式存在

函数参数argument和rest

argument代表函数中传入进来的所有参数,是一个数组

我们可以在函数中使用:

function name( ) {
//...
console.log(arguments[0]),
console.log(arguments[1]),
//...
}

rest代表函数中传入进来的未定义的参数,需要提前在函数中定义

我们同样可以在函数中使用:

var names = function(name,age,...rest){
//...
console.log(name);
console.log(age);
for(var value of rest){
console.log(value)
}
}

代码调试

我们针对上面所有知识点给出相应代码示例:

//我们演示argument
function name( ) {
//...
console.log(arguments[0])
} //我们演示rest
var names = function(name,age,...rest){
//...
console.log(name);
console.log(age);
for(var value of rest){
console.log(value)
}
}

下面我们在网页中进行调试:

name(1,2,3,"胡桃",true)
1
names("胡桃",18,"护膜","魔女")
胡桃
18
护膜
魔女

变量的作用域

对于任何含有变量的语言,作用域是必定存在的

对于JavaScript,var所定义的变量实际上也是存在作用域的

函数体内变量作用域解释

  1. 假如在函数体中声明,则在函数体外不可以使用
function test1() {
var x=1;
x=x+1;
} x=x+2;//Uncaught ReferenceError: x is not defined
  1. 如果两个函数使用了相同的变量名,只要在函数内部,则不产生冲突
function test1() {
var x=1;
x=x+1;
} function test2(){
var x=1;
x=x+2;
}
  1. 内部函数可以使用外部函数的成员,但外部函数不能使用内部函数的成员
function test3(){
var x=1; //内部函数使用外部函数的成员
function indextest(){
var y=1;
x = x+1;
console.log(x);
} indextest(); //外部函数不可以使用内部函数成员
y=y+1;//Uncaught ReferenceError: y is not defined
}
  1. 当内部函数变量和外部函数变量重名时,由内向外查找,就近原则
function test4(){
var x=1; function indextest() {
var x=2;
console.log(x);
} indextest();//这里结果为2
}

良好的变量定义格式

我们在JavaScript函数中定义变量时,常常将所有变量在头部定义完全,然后在后面使用

function test5(){
//在开头定义好所有变量
var x=3,y=2,z,name; //在后面可以随便使用变量
x=x+2;
z=x+y;
}

全局变量

全局变量常常带有window前缀,但默认带有,所以不需要书写

window属于JavaScript下的一个对象,window之下包含我们所定义的全局变量以及各种函数方法

function test6(){
var x = 1; //下面所输出的x均为上方所定义的全局变量x
console.log(x);
console.log(window.x); //下面所使用的alert和window.alert具有相同代码相同作用
alert(x);
window.alert(x);
}

我们也可以通过重新定义window下的函数方法来更改该函数原有的操作

//在下述操作之后,alert不会产生输出作用
window.alert = function() { } alert("Hello");

注意:

  • JavaScript实际上只有一个全局作用域,任何变量(包括函数),假如没有在函数作用域内找到,就会向外查找,若在全局作用域内均未查找到,则报错RefrenceError

局部变量

在JavaScript的ES5中会出现变量作用域过大导致代码冲突的结果:

function test7(){
for(var x=1;x<10;x++){
console.log(x);
} // 我们希望x的作用域只在for中,但它仍会被带出for
x=x+1;
}

JavaScript在ES6中加入了新的定义类型let用来定义局部变量

function test7(){
for(let x=1;x<10;x++){
console.log(x);
} //x则只在for中有作用
console.log(x);//Uncaught ReferenceError: x is not defined
}

常量Const

在JavaScript的ES6之前,我们定义常量只是采用常识约束:

  • 我们假设全大写字母的变量为常量
  • 但实际上是可以修改的
//我们定义PI
var PI = 3.14;
//但我们仍旧可以修改
PI = 3.33;

但在JavaScript的ES6中,提供了const定义类型,它所定义的变量是真正的常量,是允许修改的:

//我们定义PI
const PI = 3.14;
//我们无法修改,下述代码报错
PI = 3.33;

方法的定义和调用

方法的物理定义:

  • 对象中只存在两种东西:属性和方法
  • 对象中的函数被我们称为方法

方法示例

我们给出方法的示例:

var student = {
//对象中包含属性
name:"胡桃", //对象中包含方法
sing:function(){
//this指向当前对象的属性
console.log(this.name + "在唱歌")
}
} //我们在调用方法时,需要带上对象并且加上()
student.sing();

This和Apply的区别

我们稍微讲解一下对象方法中的This和Apply:

  • This:无法指向,只能在对象的方法中出现,并且固定指向自身对象的属性
  • Apply:可以控制this指向,在调用含有this的函数时调用,第一个参数是对象,后面是所需参数

我们给出案例进行讲解:

//首先我们给出一个外部函数来计算年龄:
function getAge(){
//这里采用了Date内置对象,我们后面会讲到,这里是获得当前年份
var nowTime = new Date().getFullYear();
return nowTime - this.birth;
} //我们创建一个对象(直接调用getAge,相当于this的使用)
var hutao = {
name:"胡桃",
birth:2002,
age: getAge
} //我们直接对getAge采用apply方法,使其this指向hutao
//第一个参数是对象,后面均为参数所需值
getAge.apply(hutao,[]);

我们给出网页端的操作:

//我们需要调用age时,是采用的age()方法
console.log(hutao.age())
20
//这里采用getAge的apply方法
getAge.apply(hutao,[]);
20

内部对象

JavaScript的内部对象类似于我们Java中的常见类

它们同样都是由他人创造并存在于JavaScript中,我们可以直接调用帮助我们编程

标准类型

我们先来介绍一些标准类型便于内部对象的讲解

我们先给出一个新的方法,用于分析其类型:

typeof 类型对象

我们给出案例:

typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof []
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

Date日期对象

首先我们给出日期对象的定义方法:

var name = new Date();

我们通过日期对象来进行一些方法操作:

方法名 说明
name.getFullYear() 返回当前年份
name.getMonth() 返回当前月份
name.getDate() 返回当前日期
name.getDay() 返回当前星期
name.gatHours() 返回当前小时
name.getMinutes() 返回当前分钟
name.getSeconds() 返回当前秒数
name.getTime() 返回当前时间到1970 1.1 00:00:00 的毫秒数

我们同时提供一些Date对象输出日期的不同写法(这里在网页示例):

now = new Date()
Thu Jul 14 2022 13:27:07 GMT+0800 (中国标准时间) now.toLocaleString()
'2022/7/14 13:27:07' now.toGMTString()
'Thu, 14 Jul 2022 05:27:07 GMT'

JSON字符串

我们先来介绍一下JSON:

  • 在早期,所有数据传输都采用XML文件,但后来开始采用JSON传输
  • JSON是一种轻量级的数据交换格式
  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言
  • 益于人的阅读和书写,也易于机器解析和生成,有效地提升了网络传输效率

在JavaScript中一切皆为对象,任何JS所支持的类型都是对象

格式:

  • 对象都采用{}
  • 数组都采用[]
  • 键值对都采用 key:value

我先在这里讲解一下JSON的格式,并且给出对象进行对比:

//对象具有对象的形式
var obj = {
name:"万叶",
eyes:"风"
} //JSON虽然和对象相似,但实际上是字符串,内部所有元素都有"""所包围
var json = '{"name":"万叶","eyes":"风"}'

最后我们给出JSON和对象之间的转换:

var obj = {
name:"万叶",
eyes:"风"
} //对象转化为JSON字符串
var jsonUser = JSON.stringify(obj); //JSON字符串转化为对象
var wanye = JSON.parse('{"name":"万叶","eyes":"风"}')

面向对象编程

首先面向对象编程是什么呢?

  • 面向对象都具有一个模板类
  • 我们根据模板类来产生对象并对其进行操作

JavaScript的类和对象

JavaScript的面向对象与其他面向对象有一点区别:

        //我们先给出一个整体对象(类似于类,但类需要写有数据)
var Student = {
name:"name",
age:18,
run:function() {
console.log(this.name + "running!")
}
}; //我们创建一个对象
var xiaoming = {
name:"xiaoming"
} //然后我们让小明的本源指向Student对象
xiaoming._proto_ = Student; //下面是网页测试给出的结果,我们可以看到xiaoming继承了Student的方法
// xiaoming
// {name: 'xiaoming', _proto_: {…}}
// name: "xiaoming"
// _proto_: {name: 'name', age: 18, run: ƒ}
// [[Prototype]]: Object

但是在ES6版本之后,JavaScript给出了class关键字,具体化了类这个概念:

class定义模板:

class name{
//...
}

下面给出class案例:

class Student{

    //class配置的constructor方法,用来创造对象的属性
constructor(name){
this.name = name;
} //方法直接在下面书写即可
run(){
console.log(this.name + "running");
}
} //创建新对象的方法(需要把所需参数写入)
var yebao = new Student("yebao");

我们给出网页调试结果:

yebao
Student {name: 'yebao'}
yebao.name
'yebao'
yebao.run()
4.html:19 yebaorunning

结束语

好的,关于JavaScript的函数和对象我们就介绍到这里,下一期我们会讲解JavaScript的重点BOM和DOM部分。

JavaScript进阶知识点——函数和对象详解的更多相关文章

  1. JavaScript中的Function(函数)对象详解

    JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器: 作为对象方法: 作为构造函数. 1.作为普通逻辑代码容器 function multiply(x, y ...

  2. js-arguments 函数参数对象详解

    前言 JavaScript 函数参数不同于其他编程语言,既不需要规定参数的类型,也不需要关心参数的个数,因此 JavaScript 因函数参数而变得十分灵活,本文总结一下 arguments 参数对象 ...

  3. JavaScript基础知识之——Location 对象详解

    属性 描述 location.hash 设置或取得 URL 中的锚 location.host 设置或取得 URL 中主机(包括端口号) location.hostname 设置或取得 URL 中的主 ...

  4. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  5. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  6. jQuery的deferred对象详解 jquery回调函数

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的 ...

  7. dom对象详解--document对象(一)

     document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...

  8. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

  9. dom对象详解--document对象(二)

       dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...

随机推荐

  1. [AcWing 87] 把字符串转换成整数

    点击查看代码 class Solution { public: int strToInt(string str) { int k = 0; while (k < str.size() & ...

  2. numpy学习Ⅱ

    今天有空再把numpy看一下,补充点不会的,再去看matplotlib 回顾之前笔记,发现之前的numpy学习Ⅰ中关于numpy的行.列.维可能表述有点不清晰,这里再叙述一下 import numpy ...

  3. 管家婆软件工贸版(标准财务+进销存+生产管理)V18.0功能简介

    管家婆软件工贸版(标准财务+进销存+生产管理)V18.0功能简介 管家婆 工贸版(标准财务+进销存+生产管理) 1.整体介绍 管家婆工贸版系列软件是针对国内中小型生产加工企业,将ERP管理思想与几十万 ...

  4. 面试突击49:说一下 JUC 中的 Exchange 交换器?

    Exchange(交换器)顾名思义,它是用来实现两个线程间的数据交换的,它诞生于 JDK 1.5,它有两个核心方法: exchange(V x):等待另一个线程到达此交换点,然后将对象传输给另一个线程 ...

  5. arts-week11

    Algorithm 69. Sqrt(x) - LeetCode Review Building a network attached storage device with a Raspberry ...

  6. 442. Find All Duplicates in an Array - LeetCode

    Question 442. Find All Duplicates in an Array Solution 题目大意:在数据中找重复两次的数 思路:数组排序,前一个与后一个相同的即为要找的数 Jav ...

  7. 119_Power Pivot 长尾明细显示为【其他】

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 最近比较忙,太久不没有更新文章,确实没有好的素材,就写一个吧. 在关于产品数据分析的时候,我们经常关注的是主要的 ...

  8. 每天一个 HTTP 状态码 201

    201 Created 201 Created 表示客户端的请求已经成功完成,结果是创建了一个新资源,通常用于响应「增删改查」里的「增」.如果是严格按照 RESEful style 的 API,那么当 ...

  9. dubbo是如何实现可扩展的?(二)

    牛逼的框架,看似复杂难懂,思路其实很清晰.---me 上篇文章,在整体扩展思路上进行了源码分析,比较粗糙,现在就某些点再详细梳理下. dubbo SPi的扩展,基于一类.三注解. 一类是Extensi ...

  10. CF 1015F

    题意:[CF 1015F](https://codeforces.com/contest/1015/problem/F) 给你一个模式串A(一个不一定合法的括号序列),让你构造长度为2*n的合法括号序 ...