JavaScript 学习贼基础的那种哦!!! 中篇
4 函数
4.1
方法: 对象(属性, 方法)
函数:
举例子 java
//java
public 返回值类型 方法名() {
}
定义方式一
绝对值函数
<script>
'use strict';
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
</script>
一旦执行到 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免费赠送的关键字;
代表, 传递进来的所有参数, 是一个数组~
let abs = function (x) {
console.log("x=>"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
问题: arguments 包括所有的参数, 我们有时候想使用多余的参数来进行附加操作. 排除已有的参数
rest
以前:
function aaa(a, b) {
console.log("a=>" + a);
console.log("a=>" + b);
if (arguments.length > 2) {
for (let i = 2; i < arguments.length; i++) {
}
}
}
现在:
<script>
function aaa(a, b, ...rest) {
console.log("a=>" + a);
console.log("a=>" + b);
console.log(rest);
}
</script>
ES6 引入的新特性, 获取除了已经定义
rest参数只能写最后面, 必须用 … 标识
4.2 变量的作用域
在javascript中, var定义变量实际是有作用域的.
假设在函数体中声明, 则在函数体外不可以使用~( 非要实现的话, 后面可以研究一下 闭包)
<script>
'use strict'
function qj() {
let x = 1;
x = x + 1;
}
x = x + 2; //注意变量的作用域
</script>
如果两个函数使用了相同的变量名, 只要在函数内部, 就不冲突
function qj() {
let x = 1;
x = x + 1;
}
function qj() {
let x = 1;
x = x + 1;
}
内部函数可以访问外部函数的成员, 反之则不行~
function qj() {
let x = 1;
//内部函数可以访问外部函数的成员, 反之则不行~
function qj2() {
let y = x + 1;
}
let z = y + 1; //y已经被销毁了吧
}
假设, 内部函数变量和外部函数的变量, 重名!
function qj() {
let x = 1;
function qj2() {
let x = 'A';
console.log('inner' + x); //outer1
}
console.log('outer' + x); //innerA
qj2();
}
qj();
假设在javaScript 中函数查找变量从自身函数开始~, 由内向外查找. 假设外部存在这个同名的函数变量, 则内部函数会屏蔽外部函数的变量.
提升变量的作用域
function qj() {
let x = "x" + y;
console.log(x);
let y = 'y';
}
结果: xundefined
说明; js执行引擎, 自动提升了y的声明, 但是不会提升变量y的赋值;
function qj2() {
let y;
let x = "x" + y;
console.log(x);
y = 'y';
}
这个是在javascript 建立之初就存在的特性, 养成规范: 所有的变量定义都放在函数的头部, 不要乱放, 便于代码维护;
function qj2() {
let x = 1;
y = x + 1;
z, i, z; //undefined;
//之后随意用
}
全局函数
//全局变量
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);
全局对象 window
let x = 'xxx';
window.alert(x);
alert(window.x); //默认所有的全局变量, 都会自动绑定在window对象下;
alert() 这个函数本身也是一个 window 变量
let x = 'xxx';
window.alert(x);
let 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文件, 使用了相同的全局变量, 冲突~ > 如果能减少冲突?
// 唯一全局变量
let weifc = {};
//定义全局变量
weifcApp.name = 'weifc';
weifcApp.add = function (a, b) {
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中, 降低全局命名冲突的问题~
JQuery
局部作用域 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); //i 出了这个作用域还可以使用
}
建议使用 let,
常量 const
在ES6 之前, 怎么定义变量: 只有用全部大写字母命名的变量就是常量; 建议不要修改这样的值?
var PI = '3.14';
PI = '213'; //可以改变这个值
console.log(PI);
在ES6 引入常量关键字 const
4.3 方法
定义方法
方法就是把函数放在对象的里面, 对象只有两个东西: 属性和方法
let weifc = {
name: 'weifc',
bitrh: 2001,
// 方法
age: function () {
// 今年 - 出生的年
let now = new Date().getFullYear();
return now - this.bitrh;
}
}
调方法一定义用 ();
this.代表什么?
踩开上面的代码看看
function getAge() {
let now = new Date().getFullYear();
return now - this.bitrh;
}
var weifc = {
name: 'weifc',
bitrh: 2001,
age: getAge
}
this是无法指向的, 是默认指向调用它的那个对象;
apply
在js 中可以控制 this 的指向!
function getAge() {
var now = new Date().getFullYear();
return now - this.bitrh;
}
var weifc = {
name: 'weifc',
bitrh: 2001,
age: getAge()
}
var xiaoming = {
name: '小明',
bitrh: 2000,
age: getAge()
}
//getAge.apply(xiaoming, []); // this, 指向了 xiaoming, 参数为空
//getAge.apply(weifc, []); // this, 指向了 weifc, 参数为空
报错
5.对象
标准对象
5.1 Date
基本使用
let now = new Date(); //Thu Dec 10 2020 11:29:32 GMT+0800 (中国标准时间)
now.getFullYear(); //年 2020
now.getMonth(); //月 0 ~ 11
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳
console.log(new Date(111111111111)); //通过时间戳, 获取时间
转换
JSON
json 是什么 百度即可
早期, 所有数据传输习惯了XML文件!
在JavaScript 一切皆为对象, 任何 Js 支持的类型都可以用 JSon 来表示; number, string …
格式:
对象都用{}
数组都使用[]
所有的键值对, 都 key : value
JSON字符串 和 JS对象的转换
var user = {
name: "weifc",
age: 3,
sex: '男'
}
//对象转化为 json 字符串
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象
var obj = JSON.parse('{"name":"qinjiang", "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面向对象编程
6.1 什么是面向对象
javascript : java : C++ … 面向对象; 但是 javascript 有一些区别!
类: 模板
对象: 具体的示例
在 javaScript 这个需要大家换一下思维方式!
原型: 模板(这个很重要)
<script>
var Student = {
name: "weifc",
age: 3,
run: function () {
console.log(this.name + " run ...");
}
};
var xiaoming = {
name: "xiaoming"
};
//原型对象
xiaoming.__proto__ = Student;
var Bird = {
fly: function () {
console.log(this.name + " fly...");
}
}
// 小明的原型是 Bird
xiaoming.__proto__ = Bird;
</script>
class 继承
class 关键字, 是在 ES6 引入的
1.定义一个类, 属性, 方法
以前
function Student(name) {
this.name = name;
}
//给student 新增一个方法
Student.prototype.hello = function () {
alert('hello');
}
现在
//ES6 之后 ====
// 定义一个学生的类
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
- 继承
//ES6 之后 ====
// 定义一个学生的类
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello');
}
}
class xiaoStudent extends Student {
constructor(name, grade) {
super(name);
this.grad = grade;
}
mgGrade() {
alert('我是一名小学生');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoStudent("xiaohong", 10);
本质: 查看对象原型
原型链
proto
操作BOM 对象 (重第)
浏览器介绍
JavaScript 和 浏览器关系?
JavaScript 诞生就是为了能够让它在浏览器中运行!
BOM: 浏览器对象模拟器
IE 6~ 11
Chrome
Safari
FireFox
Opera
BOM: 浏览器对象模型
第三方
QQ浏览器
360 浏览器
window
window 代表浏览器窗口
window.alert(1);
undefined
window.innerHeight;
350
window.innerWidth;
892
window.outerWidth;
907
//可以适当调整浏览器端口, 试试
Navigator
Navigator , 封装了浏览器的信息
navigator.appVersion
“5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36”
navigator.appName;
“Netscape”
navigator.userAgent
“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36”
大多数时候, 我们不会使用 navigator 对象, 因为会被人为修改 !
不建议使用这些属性来判断和编写代码
screen
代表屏幕
screen.width;
1536 px
screen.height;
864 px
location (重要)
location 代表当前页面的URL信息
hash: ""
host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript_tests/lesson02/8.class%E7%BB%A7%E6%89%BF.html?_ijt=2igu1rniiudbqmdebmvs43f2fn"
origin: "http://localhost:63342"
pathname: "/JavaScript_tests/lesson02/8.class%E7%BB%A7%E6%89%BF.html"
port: "63342"
protocol: "http:"
reload:f reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')
document
document 代表当前的页面, HTML DOM文档树
document.title
"百度一下,你就知道"
document.title="weifc";
"weifc"
获取具体的文档树节点
<dl id="">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取 cookie
劫持 cookie 原理
www.taobao.com
<script scr="aa.js"></script>
//恶意人员; 获取你的 cookie 上传到他的服务器
服务器端可以设置 cookie: httpOnly
history
history.back(); //后退
undefined
history.forward(); //前进
undefined