• 定义方式一
  绝对值函数

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 就可以调用函数！

方式一和方式二等价！

参数问题：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 参数只能写在最后面，必须用 … 标识。

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

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

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

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

function ff() {
    var x = 1;
    x = x + 1;

}

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

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

function ff() {
    var x = 1;

    // 内部函数可以访问外部函数的成员，反之则不行
    function ff2() {
        var y = x + 1;  // 2
    }

    var z = y + 1; // Uncaught ReferenceError: y is not defined
}

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

function ff() {
    var x = 1;

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

}

ff()

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

• 提升变量的作用域

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

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

function ff2() {
    var y;

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

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

function ff2() {
    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 TaoApp = {};

// 定义全局变量
TaoApp.name = 'haha';
TaoApp.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); //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);

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

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

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

var hehe = {
    name: 'enen',
    bitrh: 2000,
    age: getAge
}

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

• apply
  在js 中可以控制 this 指向！

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

var hrhr = {
    name: 'rgrg',
    bitrh: 2000,
    age: getAge
};

var xiaoming = {
    name: '小明',
    bitrh: 2000,
    age: getAge
};



getAge.apply(xiaoming,[]);

• 标椎对象

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

基本使用

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

now.toGMTString()

• json 是什么

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

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
  AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
  AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
  AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
• 原生的js写法 xhr 异步请求
• jQuey 封装好的 方法 $(”#name“).ajax(“”)
• axios 请求
• AJAX 应用
  运用XHTML+CSS来表达资讯；
  运用JavaScript操作DOM（Document Object Model）来执行动态效果；
  运用XML和XSLT操作资料;
  运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
  注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

• 原型对象
  javascript、Java、c#。。。。面向对象；javascript有些区别！
• 类: 模板 原型对象
• 对象: 具体的实例
  在JavaScript这个需要大家换一下思维方式！
  原型：

var Student = {
    name: "qinjiang",
    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....");
    }
};

// 小明的原型 是 Student
xiaoming.__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 xiaohong = new Student("xiaohong");
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 xiaohong = new XiaoStudent("xiaohong",1);


</script>

本质：查看对象原型

• 原型链 __ proto __:

• 浏览器介绍
  JavaScript 和 浏览器关系？
  JavaScript 诞生就是为了能够让他在浏览器中运行！
  BOM : 浏览器对象模型
• IE 6~11
• Chrome
• Safari
• FireFox

三方

• QQ浏览器

• 360浏览器

• window（重要）
  window 代表 浏览器窗口
  

• Navigator （不建议使用）
  Navigator ,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用 navigator 对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

• screen
  代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

• location （重要）
  location 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.csdn.net/zx123456789kk')

• document （内容； DOM）
  document 代表当前的页面， HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='好好学习'
"好好学习"

• 获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>=

• 获取 cookie

document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

• 劫持 cookie 原理
  www.taobao.com

<script src="aa.js"></script>
<!--恶意人员；获取你的cookie上传到他的服务器 -->

服务器端可以设置 cookie：httpOnly

• history （不建议使用）
  history 代表浏览器的历史记录

history.back() //后退
history.forward() //前进

• 核心
  浏览器网页就是一个Dom 树形结构！
• 更新：更新Dom节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点
  要操作一个Dom节点，就必须要先获得这个Dom节点
• 获得dom节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children[index]; //获取父节点下的所有子节点
// father.firstChild

                            
                            版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

                            原文链接：https://blog.csdn.net/zx123456789kk/article/details/103898750

                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。