JavaScript基础知识day05

一、this关键字

this关键字,this在不同的地方指向不同

            this指向是对象

        console.log(window);

        console.log(this);

        console.log(window == this);//true

 

                this作为一个普通函数调用，this指向window

                在对象方法中的this，谁调用的this就指向谁

        function fun() {
            console.log(this);
            function inner() {
                console.log(this, "inner"); 
            }
        }
        fun();

        var obj = {
            myname: 'myobj',
            say: function () {
                console.log(this, 'sayzz');
            },
            job: {
                myname: 'job',
                say: function () {
                    console.log(this, 'sayzz');
                },
            }
        }

二、改变this指向的方法

1.call方法   函数.call(参数1,参数2...多个参数)

                    参数1表示将函数中的this指向该参数

                    从参数2开始表示是传递给函数的实参

2.apply方法   函数.apply(参数1,参数2)

                    参数1表示将函数中的this指向该参数

                    参数2是一个数组，数组中的元素是传递给函数的实参

3.bind方法   函数.bind(参数1,参数2...多个参数)()  返回是函数体

                    参数1表示将函数中的this指向该参数

                    从参数2开始表示是传递给函数的实参

4.call方法和bind方法的区别：

                     call方法直接调用函数，bind方法返回的是函数体，需要自己调用

5.call方法和apply方法的区别：

                     实参传递的方式不同，call方法一次传参，apply方法通过数组传参 

三、创建对象的方法

1.直接量  {}

2.工厂模式创建对象(手动创建对象，返回对象)

        function creatObj(name, age, sex) {
            var obj = {};
            obj.myname = name;
            obj.myage = age;
            obj.mysex = sex;
            obj.say = function () {
                console.log("55555555555");
                console.log(this);
            };
            obj.aa = {
                a: 2,
                s: function () {
                    this.age = 18;
                    console.log(this);
                }

            }
            obj.say();
            // var s1 = new obj.aa.s();
            obj.aa.s();
            // console.log(s1);
            // console.log(obj);
            console.log(this);
        }
        var p1 = new creatObj("111", 18, "男");
        var p2 = new creatObj("222", 19, "女");

3.构造函数(通过new关键字调用，隐式返回this)

            3.1.构造函数也是函数,构造函数的函数名首字母一般是大写，目的是为了区分普通函数和构造函数

            3.2.用new关键字调用函数  new 函数名(), 那么这个函数就叫做构造函数

            3.3.构造函数中的this指向实例化对象

            3.4.new关键字做了什么？

                3.4.1.实例化对象

                3.4.2.this指向实例化对象

                3.4.3.执行代码(将属性和方法通过this添加到实例化对象上)

                3.4.4.隐式的返回了this

        function Cat() {
            console.log(this, '构造函数中的this指向实例化对象');
        }
        var c1 = new Cat();
        console.log(c1);//c1是实例化对象
        var c2 = new Cat();
        console.log(c1 == c2);

4..通过内置构造函数创建（Array,Object,Date...）

        console.log(new String());
        console.log(new Number());
        console.log(new Array());
        console.log(new Date());//时间对象
        console.log(new Object());
        console.log(new Boolean());

5.object.creat() 方法创建

        参数只能是null和对象

        console.log(Object.creat(null));
        // console.log(Object.creat("hello"));//报错
        console.log(Object.creat([]));

四、原型

1.万物皆对象

2.原型(原型对象)，在js中继承对象的属性，有一个[[Prototype]]内部属性，[[Prototype]]对应的对象叫做原型

3.[[Prototype]]是内部属性，我们不能直接访问这个属性，firefox和chrome浏览器提供了一个__proto__属性，访问对象的原型

4.

        每个对象都有__proto__属性，属性值就是一个普通对象

        每个函数对象都有一个prototype属性，属性值就是一个普通对象

        原型对象上有一个constructor属性，属性值是指向实例化对象的构造函数

5.原型对象的作用

                1.资源共享，节约内存空间

                2.实现继承

        function Person() {
            this.myname = '小明';
            this.myage = 18;
            this.say = function () {
                console.log("我的名字是" + this.myname);
            };
        }

        var p1 = new Person();
        console.log(p1);//实例化对象
        Person.prototype.hobby="dance";
        console.log(p1.hobby);

        //实例化对象.__proto__属性值是对象(原型对象)
        //函数对象.prototype属性的属性值是对象(原型对象)
        console.log(p1.__proto__ == Person.prototype);
        // 原型对象.constructor = 实例化对象的构造函数.
        console.log(Person.prototype.constructor);

 五、练习题

1.

    <script src="">
        // 练习题5:
        function a(xx) {
            this.x = xx;//this==window
            return this;//window
        };
        var x = a(5);
        var y = a(6);
        console.log(x.x);//undefined
        console.log(y.x);//window.x==6
        /*
            x:function(5){} /5 /6
            y:functiin(xx){} 
            a:function(xx){}

            AO{
                xx:5,
            }
            AO{
                xx:6,
            }
        */
    </script>

2.

    <script >
        // 练习题6:
        var a = 5;

        function test2() {
            a = 0;
            console.log(a);//0 /0
            console.log(this.a);//window.a==5 /undefined
            var a;
            console.log(a);//0 /0
        }
        test2();
        var test3 = new test2();
        console.clear();
        console.log(test3);
        /*
            GO{
                a:5,
                test2:function(){}
                AO{
                    a:0,
                }
                new test2:{}
            }
        */
    </script>