JavaScript（二）函数、变量的作用域、let、const、arguments关键字、方法、内部对象、面向对象编程

最新推荐文章于 2023-07-27 15:15:04 发布
最新推荐文章于 2023-07-27 15:15:04 发布
阅读量281 收藏
点赞数
分类专栏： javascript 文章标签： js javascript 面向对象编程
只能看不能摸哟！
本文链接：https://blog.csdn.net/weixin_45677145/article/details/104198648
版权

四、函数

4.1、定义函数

定义方式一

绝对值函数

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到 return 代表函数结束，返回结果！
如果没有执行 return ，函数执行完也会返回结果，结果就是 undefined!

定义方式二

var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

function(x){ …. } 这是一个匿名函数。但是可以把结果赋值给 abs ，通过abs 就可以调用函数！
方式一和方式二等价！

调用函数

abs(10)  //10
abs(-10) //10

参数问题：javaScript 可以传任意个参数，也可以不传递参数~
参数进来是否存在的问题？
假设不存在参数，如果规避？

var abs = function(x){
    //手动抛出异常来判断
    if (typeof x!== 'number') {
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments

arguments是一个JS免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！

var abs = function(x){
    console.log("x=>"+x);
    for (var i = 0; i<arguments.length;i++){
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

问题： arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数~

rest

以前：

if (arguments.length>2){
    for (var i = 2; i<arguments.length;i++){
  //......
    } 
}

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~ …

function aaa(a,b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

注意：rest 参数只能写在最后面，必须用 … 标识。

4.2、变量的作用域
在javascript中， var 定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~ （非要想实现的话，后面可以研究一下闭包 ）

function haha() {
    var x = 1;
    x = x + 1;
}

x = x + 2; //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function haha() {
    var x = 1;
    x = x + 1;
}

function hehe() {
    var x = 'A';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行.

function haha() {
    var x = 1;
    
    // 内部函数可以访问外部函数的成员，反之则不行
    function hehe() {
        var y = x + 1;  // 2
    }
    
    var z = y + 1; // Uncaught ReferenceError: y is not defined
}

假设，内部函数变量和外部函数的变量，重名！

function haha() {
    var x = 1;
    
    function hehe() {
        var x = 'A';
        console.log('inner'+x); // outer1
    }
    
    console.log('outer'+x); //innerA
    hehe()
}
haha()

假设在JavaScript 中 函数查找变量从自身函数开始~，由 ‘’内‘’ 向 ‘’外‘’ 查找 . 假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function haha() {
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

结果 ： xundefined
说明 : js 执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function hehe() {
    var y;
    
    var x = "x" + y;
    console.log(x);
    y = 'y';
}

这个是在JavaScript建立之初就存在的特性。养成规范： 所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function hehe() {
    var x = 1,
        y = x + 1,
        z,i,a; //undefined
    // 之后随意用
}

全局函数

全局变量

//全局变量
x = 1;
    function f() {    
       console.log(x);
    }
f();
console.log(x);

全局对象 window

var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量，都会自动绑定在 window对象下；

alert() 这个函数本身也是一个 window 变量；

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//old_alert(x);

window.alert = function () {

};

// 发现 alert() 失效了
window.alert(123);

//恢复
window.alert =  old_alert;
window.alert(456);

Javascript 实际上只有一个全局作用域， 任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的js 文件，使用了相同的全局变量，冲突~ > 如果能够减少冲突？

// 唯一全局变量
var App = {};
// 定义全局变量
App.name = '亚瑟';
App.add = function (a,b) {
    return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中， 降低全局命名冲突的问题~

局部作用域let

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //问题？ i 出了这个作用域还可以使用
}

ES6 let 关键字，解决局部作用域冲突问题！

function aaa() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //Uncaught ReferenceError: i is not defined
}

建议大家都是用 let 去定义局部作用域的变量；

常量 const

在ES6 之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值.

var PI = '3.14';

console.log(PI);
PI = '213'; //可以改变这个值
console.log(PI);

在 ES6 引入了常量关键字 const

const PI = '3.14'; // 只读变量
console.log(PI);
PI = '123'; // TypeError: Assignment to constant variable.
console.log(PI);

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西 ： 属性和方法

var hero = {
    name: '亚瑟',
    bitrh: 2000,
    // 方法
    age: function () {
        // 今年 - 出生的年
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
}
//属性
hero.name
//方法,一定要带  ()
hero.age()

this.代表什么？ 拆开上面的代码看看~

function getAge() {
    // 今年 - 出生的年
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var hero = {
    name: '亚瑟',
    bitrh: 2000,
    age: getAge
}

// hero.age() ok
// getAge()  NaN   window

this是无法指向的，是默认指向调用它的那个对象；

apply

在js 中可以控制 this 指向！

function getAge() {
    // 今年 - 出生的年
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var hero = {
    name: '亚瑟',
    bitrh: 2000,
    age: getAge
};

var adc = {
    name: '小鲁班',
    bitrh: 2000,
    age: getAge
};

// hero.age() ok
getAge.apply(adc,[]);// this，指向了 adc，参数为空

5、内部对象

标椎对象

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

通过对象操控浏览器
浏览器内置对象：

  • window：全局，代表浏览器(可以省略不写)

    • alert()：弹窗
    • console.log()：打印

  • navigator：代表浏览器的信息(window.navigator—省略–>navigator)

    • appName：浏览器的名称
    • appVersion：浏览器版本
    • language：浏览器设置的语言
    • platform：操作系统类型
    • userAgent：浏览器设置的user-agent字符串

  • screen：表示屏幕的信息

    • width：宽度，以像素为单位
    • height：高度，以像素为单位
    • colorDepth：返回颜色的位数，如：8、16…

  • location：表示当前页面的URL信息

    • href：获取完整的URL
    • protocol：获取协议：http
    • host：域名
    • port：端口
    • pathname：路径
    • search：参数
    • hash：#后面的部分

  • document：代表当前页面

5.1、Date
基本使用

var now = new Date(); //Sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth(); // 月   0~11  代表月
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒

now.getTime(); // 时间戳 全世界统一 1970 1.1 0:00:00  毫秒数

console.log(new Date(1578106175991)) //时间戳转为时间

转换

now = new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now.toLocaleString // 注意，调用是一个方式，不是一个属性！
ƒ toLocaleString() { [native code] }
now.toLocaleString()  
"2020/1/4 上午10:49:35"
now.toGMTString()
"Sat, 04 Jan 2020 02:49:35 GMT"

5.2、JSON

json 是什么?

早期，所有数据传输习惯使用 XML 文件！

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript 一切皆为对象、任何js 支持的类型都可以用JSON来表示；number，string…格式：

  • 对象都用 {}
  • 数组都用 []
  • 所有的键值对 都是用 key:value

JSON字符串 和 JS 对象的转化

var user = {
    name: "亚瑟",
    age: 3,
    sex: '男'
}

//对象转化为json字符串 {"name":"亚瑟","age":3,"sex":"男"}
var jsonUser =  JSON.stringify(user);

//json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('{"name":"亚瑟","age":3,"sex":"男"}');

很多人搞不清楚，JSON 和 JS 对象的区别

var obj = {a: 'hello',b:'hellob'};
var json = '{"a": "hello","b":"hellob"}'

5.3、Ajax

  • 原生的js写法 xhr 异步请求
  • jQuey 封装好的 方法 $(”#name“).ajax(“”)
  • axios 请求

6、面向对象编程

原型对象

javascript、Java、c#。。。。面向对象；javascript有些区别！

  • 类: 模板 原型对象
  • 对象: 具体的实例
    在JavaScript这个需要大家换一下思维方式！
    原型：
var Student = {
    name: "亚瑟",
    age: 3,
    run: function () {
        console.log(this.name + " run....");
    }
};

var hero = {
    name: "小鲁班"
};


//原型对象
hero.__proto__ = Student;

var Bird = {
    fly: function () {
        console.log(this.name + " fly....");
    }
};

// 小鲁班的原型 是 Student
hero.__proto__ = Bird;
function Student(name) {
    this.name = name;
}

// 给student新增一个方法
Student.prototype.hello = function () {
    alert('Hello')
};

class 继承

class关键字，是在ES6引入的
1、定义一个类，属性，方法

// 定义一个学生的类
class Student{
	 constructor(name){
        this.name = name;
    }
	 hello(){
        alert('hello')
    }
}
var xiaoming = new Student("xiaoming");
var xiaoluban = new Student("xiaoluban");
xiaoming.hello()

2、继承

<script>
	//ES6 之后=============
    // 定义一个学生的类
    class Student{
    	 constructor(name){
            this.name = name;
        }
         hello(){
            alert('hello')
        }
    }
class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小学生,我爱玩鲁班！')
    }
}
var xiaoming = new Student("xiaoming");
var xiaoluban = new XiaoStudent("xiaoluban",1);

</script>

本质：查看对象原型
在这里插入图片描述

原型链

__ proto __:
在这里插入图片描述
这次先分享到这块ヾ(￣▽￣)ByeBye~

我是大肥鼠
关注
专栏目录
JavaScript 基础函数_深入剖析变量和作用域
10-22
JavaScript是一种广泛用于网页开发的脚本语言，它的函数和作用域是实现代码逻辑结构和模块...理解JavaScript中的变量作用域非常重要，它有助于避免变量命名冲突和意外的变量修改，从而编写出更加健壮和易于维护的代码。
js2java rpc_超轻量级RPC框架 JS2Java RPC
weixin_39732991的博客
02-13 209
授权协议: LGPL开发语言: Java JavaScript ActionScript操作系统: 跨平台软件介绍JS2Java RPC 是一个基于flash、java、js架构设计的超轻量级RPC框架。特点：1、JS2Java RPC：能够在javascript的web浏览器环境中指定java类，获取该类实例的属性，调用该实例的方法2、支持复杂js对象作为入参：能够传递复杂的JavaScript...
java:基础，JDBC,AOP
weixin_42248522的博客
10-28 322
1. java Date中方法toLocaleString过时的替代方案 2.JDBC 3.aop
java tolocalstring_[Java]过时data.toLocaleString()的解决方法
weixin_31366459的博客
02-28 761
System.out.println(new java.util.Date());输出：Thu Jan 27 14:43:28 CST 2011System.out.println(new java.util.Date().toLocaleString());输出：2011-1-27 14:45:21不过现在toLocaleString()方法已过时，由DateFormat.format(Date...
js2java rpc_node通过dubbo2.js调用java dubbo服务(rpc)
weixin_36372610的博客
02-17 539
本文简单介绍dubbo,rpc是什么，在egg.js中使用dubbo2.js以及dubbo与zk交互流程。开源项目dubbo2.js的github地址：https://github.com/apache/dubbo-js1. dubbo是什么随着网站规模的增大，系统发展一般会经历单一应用架构、垂直应用架构、分布式服务架构。随着垂直应用越来越多，应用之间的交互不可避免，将核心业务抽取出来作为独立的服...
javascript高级3
djb328217的博客
03-17 635
【1】Number(数字)对象 （1）创建Number数字对象 [1]变量就是对象 var num1=100; alert(typeof num1); //number---基本数据类型 [2]new Number() var num3=new Number(123); alert(typeof num3...
浅谈JavaScript 执行环境、作用域及垃圾回收
11-24
3. **块级作用域**：ES6引入的let和const关键字允许在代码块（如if或for循环）内创建局部变量。 **垃圾回收** 垃圾回收是JavaScript自动管理内存的方式，它负责识别不再使用的对象并释放它们占用的内存。...
JavaScript 基础函数_深化剖析变量和作用域_.docx
10-09
在JavaScript编程语言中，变量和作用...总的来说，理解JavaScript中的函数定义、调用、参数处理、变量作用域和安全实践是编写高效、安全代码的基础。掌握这些概念可以帮助开发者编写出更加灵活和可靠的JavaScript代码。
JavaScript 保留关键字
12-13
JavaScript 保留关键字是编程语言中预定义的词汇，它们具有特殊含义，不能被用作变量名、函数名或任何标识符。这是因为这些关键字已经被JavaScript引擎内部使用，用于控制程序的结构和行为。以下是一些主要的...
JavaScript函数IIFE使用详解
10-16
JavaScript函数IIFE（立即调用函数表达式）是一种特殊写法，主要用于创建函数作用域，避免变量污染全局命名空间。IIFE是一个表达式，该表达式定义了一个匿名函数，并立即执行该匿名函数。IIFE是一种非常实用的技术，...
转载： 轻量级 js2java RPC 框架发布
vickorfox的专栏
09-09 1161
1. 相关介绍： 1.1 是什么 是一个基于flash、java、js架构设计的超轻量级RPC框架。 1.2 特点是什么 1、JS2Java RPC：能够在javascript的web浏览器环境中指定java类，获取该类实例的属性，调用该实例的方法
Date日期对象
山河居
03-15 181
var now=new Date();//Mon Mar 15 2021 09:38:50 GMT+0800 (中国标准时间) now.getFullYear();//年 now.getMonth();//月 0~11 代表月 now.getDate();//日 now.getDay();//星期 now.getHours();//时 now.getMinutes();//分 now.getSe.
JS Date
AOOOOO李
03-03 385
Data 基本使用 <script> var now = new Date();//Tue Mar 02 2021 21:36:08 GMT+0800 (中国标准时间) now.getFullYear(); //年 now.getMinutes(); //月 国外的月份 是 0-11 月 now.getDay(); //日 now.getHours(); //时 now.getMinutes(); //分 now
Date对象用于处理日期与时间
qq_42238554的博客
03-01 1278
Date 对象用于处理日期与时间。 创建 Date 对象： new Date() 以下四种方法同样可以创建 Date 对象： var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seco...
精简JavaScript
雙馬程序猿
09-08 1583
精简JavaScript：1.什么是JavaScript、2.快速入门、3.数据类型、4.函数、5.内部对象、6.面向对象编程、7.操作BOM对象、8.操作DOM对象、9.操作表单、10.jQuery
JavaScript进阶(十一)JsJava2.0版本
热门推荐
IT全栈 华强工作室
12-22 4万+
JsJava2.0版本       2007年9月11日，JsJava团队发布了JsJava2.0版本，该版本不仅增加了许多新的类库，而且参照J2SE1.4，大量使用了类的继承和实现机制，更加符合面向对象的原则，也更加方便用户使用和扩充，而且对原来版本中存在一些bug进行了修改，下面主要介绍一下2.0版的主要功能。   1. 实现了完整的聚集（collections）框架    主要包括列表
JavaScript toLocaleString() 方法
YM123456999的博客
05-24 659
toLocaleString
【6】toLocaleString、toLocaleDateString、toLocaleTimeString等toLocale系列方法的使用及案例
最新发布
Etc.End的博客
07-27 1367
用toLocaleString、toLocaleDateString、toLocaleTimeString方法可以根据用户所在地区的语言和时间格式来显示日期和时间，提供更好的用户体验。我是Etc.End。每一次进步都值得庆祝，每一次努力都值得赞赏。不要忽视自己的成长，每一步都是向前迈进的力量。😍。
JavaScript 学习笔记——内部对象/面向对象编程
weixin_49001740的博客
03-08 1429
JavaScript 快速入门 学习笔记 五、内部对象 六、面向对象编程
"前端笔记：JavaScript函数、变量作用域和方法总结
本文将总结JavaScript中的函数、变量作用域、方法和JSON等内容。 一、函数 1. 函数的定义方式有两种，一种是使用function关键字另一种是使用匿名函数。 2. 函数可以接收任意个参数，通过arguments数组保存传入的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值