JS（5）-CFANZ编程社区

JS（5）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    /*
    浏览器在调用函数每次都会向函数内部传递一个隐含参数
        即为this,this指向的是一个对象，
        这个对象我们称为函数的上下文对象
        根据函数的调用方式，this会指向不同的对象
            1.以函数的形式调用时，this是window
            2.以方法的形式调用，this是对象

    
    */
    function fun(a, b) {
        console.log(this);
    }
    fun();//window

    //创建一个对象
    var obj = {
        name: "孙悟空",
        sayName: fun
    };
    obj.sayName();//object


    //创建一个fun函数
    function fun() {
        console.log(this.name);//this像是一个中介，插入了一个代名词
    }

    var obj2 = {
        name: "猪八戒",
        sayName: fun
    }
    obj.sayName();//孙悟空
    obj2.sayName();//猪八戒，成功的做到创建两个对象，但只是使用了一个打印name的函数
    
    *
    使用工厂方法创建对象
        通过该方法可以大量创建对象，函数里套创建对象的模板
        并通过传参来改变具体的属性值
    */
    function create(name, age, gender) {
        //创建一个新对象
        var obj = new Object();

        //向对象中添加属性,通过函数传参来改变具体的值。方便修改成不同的对象
        obj.name = name;
        obj.gender = gender;
        obj.age = age;

        //将新的对象返回
        return obj;
    }

    var obj2 = create("孙悟空",18,"男");
    var obj3 = create("猪八戒",28,"男");
    var obj4 = create("沙和尚",38,"男");

    console.log(obj2);
    console.log(obj3);
    console.log(obj4);
    

</script>

</html>
0 条评论