JavaScript

JavaScript核心 对象和函数

2021-07-11  本文已影响0人  h2coder

对象

对象属性的操作

/*
 * 使用new关键字调用的函数，是构造函数constructor
 *  构造函数是专门用来创建对象的函数
 * 使用typeof检查一个对象时，会返回object
 */
var obj = new Object();

/*
 * 在对象中保存的值称为属性
 * 向对象添加属性
 *  语法：对象.属性名 = 属性值;
 */
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = 18;

/*
 * 读取对象中的属性
 *  语法：对象.属性名
 *
 * 如果读取对象中没有的属性，不会报错而是会返回undefined
 */
console.log(obj.gender);
console.log(obj.hello);

/*
 * 修改对象的属性值
 *  语法：对象.属性名 = 新值
 */
obj.name = "tom";

//使用[]设置对象属性
obj["123"] = 789;
obj["nihao"] = "你好";

/*
 * 删除对象的属性
 *  语法：delete 对象.属性名
 */
delete obj.name;

console.log("name" in obj);

基本数据类型和引用数据类型

var a = 123;
var b = 123;
//true
console.log(a == b);

var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";

//false
console.log(obj3 == obj4);

对象字面量

var obj = new Object();

var obj = {};

var obj2 = {
    name: "猪八戒",
    age: 13,
    gender: "男",
    test: {name: "沙僧"}
};

函数

创建函数

var fun = new Function("console.log('Hello 这是我的第一个函数');");

//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数 语法：函数对象()
//当调用函数时，函数中封装的代码会按照顺序执行
//fun();

/*
 * 使用 函数声明 来创建一个函数
 *  语法：
 *      function 函数名([形参1,形参2...形参N]){
 *          语句...
 *      }
 */
function fun2() {
    console.log("这是我的第二个函数~~~");
    alert("哈哈哈哈哈");
    document.write("~~~~(>_<)~~~~");
}
//调用fun2
//fun2();

/*
 * 使用 函数表达式 来创建一个函数
 * var 函数名  = function([形参1,形参2...形参N]){
 *   语句....
 *  }
 */
var fun3 = function () {
    console.log("我是匿名函数中封装的代码");
};
//调用函数
fun3();

函数的参数

/*
 * 定义一个用来求两个数和的函数
 *  可以在函数的()中来指定一个或多个形参（形式参数）
 *  多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量
 *  但是并不赋值
 */
function sum(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log(a + b);
}

/*
 * 在调用函数时，可以在()中指定实参（实际参数）
 *  实参将会赋值给函数中对应的形参
 */
sum(1,2);
sum(123,456);

/*
 * 调用函数时解析器不会检查实参的类型,
 *  所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
 * 函数的实参可以是任意的数据类型
 */
sum(123,"hello");
sum(true , false);

/*
 * 调用函数时，解析器也不会检查实参的数量
 *  多余实参不会被赋值
 *  如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
 *
 */
sum(123,456,"hello",true,null);

立即执行函数

/**
 * 立即执行函数，空参
 */
(function () {
    alert("我是一个匿名函数")
})();

/**
 * 立即执行函数，带参
 */
(function (a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
})(123, 456)

对象属性也可以是函数

//创建一个对象
var obj = new Object();
//对对象添加属性
obj.name = "孙悟空";
obj.age = 18;
//对象的属性值是任何的数据类型，也可以是一个函数
obj.sayName = function () {
    console.log(obj.name);
};
//console.log(obj.sayName);
//调用对象的函数
obj.sayName();

var obj2 = {
        name: "猪八戒",
        age: 18,
        sayName: function () {
            console.log(obj2.name);
        }
    };
//调用对象的函数
obj2.sayName();

枚举方法中的属性

var obj = {
    name: "孙悟空",
    age: 18,
    gender: "男",
    address: "花果山"
};

//枚举对象中的属性
//使用for in 语句
/**
 * 语法：
 *      for(var 变量 in 对象) {
 *
 *      }
 *  for...in语句在对象中有几个属性，循环体就会循环几次
 *  每次执行时，会将对象的一个属性的名字赋值给变量
 */
for (var n in obj) {
    console.log("属性名" + n + "，属性值：" + obj[n]);
}

作用域

全局作用域

console.log(window);
//全局作用域下申明的变量都作为window对象的属性，所以从window中可以找回
var a = 10;
var b= 20;
var c = "hello";
console.log(window.a)

//全局作用域中的函数
function fun() {
    console.log("我是fun函数");
}
fun();
window.fun();

变量声明提前

/**
 * 变量的声明提前
 *  - 使用var关键字声明的变量，会在所有的代码执行前被声明（但是不会赋值）
 *      但如果声明变量不使用var关键字，则变量不会被声明提前
 *
 *  函数的声明提前
 *      - 使用函数声明形式创建的函数 function 函数名() {}
 *          它会在所有代码执行之前就被创建，所以我们可以在函数声明前来调用函数
 *      - 使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
 *      - 全局作用域中的变量，都是全局变量
 *          在页面的任意的部分都可以访问到
 */
 
//变量声明提前，此时值为undefined
console.log("a = " + a)
var a = 123;

//函数声明提前，所以可以在函数声明前调用
fun();
fun2();
function fun() {
    console.log("我是一个fun函数");
}
//var声明的函数，是变量声明提前，此时为undefined，不可以调用不是函数的变量，控制台会报错：Uncaught TypeError: fun2 is not a function
var fun2 = function () {
    console.log("我是fun2函数");
}

函数作用域

示例
//创建一个变量
var a = 10;

function fun() {
    var b = 20;
    var a = "我是fun函数中的a";
    console.log("a = " + a);
    function fun2() {
        console.log("a = " + a);
        //函数作用域中，访问全局作用域的变量
        //console.log("a = " + window.a);
    };
    fun2();
};

fun();
//在全局作用域中，无法访问到函数作用域中的变量
//console.log("b = " + b);

/**
 * 在函数作用域中，也有声明提前的特性
 *  使用var关键字，声明的变量，会在函数中所有的代码执行之前被声明
 *  函数声明也会在函数中，所有代码执行之前创建
 */
function fun3() {
    //undefined
    console.log(a);
    //我是fun4
    fun4();

    var a = 35;
    function fun4() {
        console.log("我是fun4");
    }
}
fun3();

var c = 33;

/**
 * 在函数中，不使用var声明的变量都会成为全局变量
 */
function fun5() {
    console.log("c = " + c);
    
    //如果打开这句注释，会产生变量提升，上面的输出会找到这个变量c的声明，但没有值，所以为undefined
    //如果不打开这句注释，就会找到全局作用域中的c，打印出33
    //var c = 10;

    //不加var，则不会产生声明，而是向上找c的全局声明
    c = 10;

    //d没有使用var关键字，则会设置为全局变量
    d = 100;//相当于window.d = 100;
}
fun5();

//在全局输出c
console.log("c = " + c);
console.log("d = " + d);

var e = 23;

/**
 * 定义形参，就相当于在函数作用域中声明了变量
 */
function fun6(e) {
    //形参e，相当于在函数作用域种声明了e
    //相当于 var e;
    
    //输出20，而不是全局作用域中的23
    alert(e);
}
fun6(20);
上一篇下一篇

猜你喜欢

热点阅读