js基础

Posted 2021-03-16 木心

1、作用域

　　块级作用域：一个大括号可以看成是一块，在这块区域中定义的变量，只能在这个区域中使用。

　　全局变量：用var声明的变量，可以在任何地方使用

　　局部变量：在函数内部定义的变量

　　隐式全局变量：声明的变量没有var。全局变量是不能被删除的，隐式全局变量可以被删除。

{
    var a = 10;
    console.log(`a=${a}`); // 10
}
console.log(`a=${a}`); // 10

{
    const b = 10;
    console.log(`b=${b}`);
}
//console.log(`b=${b}`); // b is not defined

{
    let c = 10;
    console.log(`c=${c}`);
}
//console.log(`c=${c}`); // c is not defined

　　if块

if (false) {
    var b = 20;
}
console.log(`b=${b}`) // b=undefined

if (true) {
    var c = 20;
}
console.log(`c=${c}`) // c=20

　　方法内定义的变量

function fun () {
    var a = 10;
    console.log(`fun方法内打印a的值，a=${a}`)
}
fun()
//console.log(`fun方法外打印a的值，a=${a}`) // a is not defined

　　隐式全局变量

/* 全局变量是不能被删除的，隐式全局变量可以被删除 */
var a = 10
delete a
console.log(`a=${a}`) // a=10

b = 20
console.log(`b=${b}`) // b=20
delete b
console.log(`b=${b}`) // b is not defined

/* 函数调用后，函数内没有加var声明的变量被提升为隐式全局变量 */
function fun () {
    a = 10
    var b = 20
}
// console.log(`a=${a}`) // a is not defined
// console.log(`b=${b}`) // b is not defined

fun()
console.log(`a=${a}`) // a=10
console.log(`b=${b}`) // b is not defined

 

2、预解析　

/* 把变量的声明提前到当前作用域最前面 */
console.log(a) // undefined
var a = 10

// 上面代码相对于
var a
console.log(a)
a = 10

/* 把函数的声明提前到当前作用域最前面 */
fun()
function fun() {
    console.log(‘调用fun()‘)
}

 

3、创建对象的三种方式

　　第一种：调用系统的构造函数创建对象

var obj = new Object();        
obj.name = "小明";//添加属性
obj.age = 20;
obj.sex = "男";
obj.eat = function() {  //添加方法
    console.log("吃饭");
};

console.log(obj.name);//获取对象的属性
obj.eat();//调用对象的方法

　　如何一次性创建多个对象？把创建对象的代码封装在一个函数中，即工厂模式创建对象(结合第一种和需求通过工厂模式创建对象)

function createObject(name, age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayHi = function() {
        console.log("hello，我叫" + obj.name);
    }
    return obj;
}

//创建一个对象
var per1 = createObjcet("张三",10);
per1.sayHi();

　　

　　第二种：自定义构造函数创建对象

　　自定义构造函数创建对象(创建出来的对象可以知道其类型)
       函数与构造函数的区别：名字首字母是否大写

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHi = function(){};
}

var obj = new Person("lisi", 20);
console.log(obj.name);
alert(obj instanceof Person);

　　当代码var obj=new Person("lisi",20);执行时，做了4件事
            ** 在内存中开辟空间 ，存储创建的对象
            ** 把this设置为当前的对象
            ** 设置对象的属性和方法
            ** 把this这个对象返回

 

　　第三种：字面量的方式创建对象

var obj = {}; // 定义一个对象
obj.name = "zs";
obj.sayHi = function() {};

// 优化后的写法：
var obj2 = {
    name: "lisi",
    age: 20,
    sayHi: function(){
        alert("hi，我叫" + this.name);
    }
};
obj2.name = "zhangsan";
obj2.sayHi(); // 调用对象的方法

 

4、访问对象属性和方法的方式

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.play = function() {
    
};
}
var obj = new Person("zs", 20);
console.log(obj.name); // 访问对象的属性
console.log(obj["name"]); // 访问对象的属性
obj.play(); // 调用对象的方法
obj["play"](); // 调用对象的方法

 

5、json格式的数据及遍历

　　 json格式的数据：成对的键值对

var json = {
    "name": "xiaoming",
    "age": "10"
};
alert(json.name);
alert(json["name"]);

　　通过for-in循环遍历

for(var key in json){
    console.log(json[key]);
}

 

6、内置对象
    * js学习的三种对象
        - 内置对象
        - 自定义对象
        - 浏览器对象--BOM
        
    * 如何验证变量是不是对象？
        console.log(Array instanceof Object);//内置对象
        var obj={};//自定义对象
        console.log(obj instanceof Object);
        
    * 内置对象：Math、Date、String、Array、Object

 

7、