前端笔记7-js3

1.方法:

//创建一个对象
var obj = {name:"孙悟空",age:18};

    //对象的属性也可以是对象
    obj.brother = {name:"猪八戒",age:28};

    //console.log(obj.brother.name);

    //对象的属性也可以是一个函数
    //当一个对象的属性是一个函数时，我们称这个函数是这个对象的方法
    //函数和方法只是称呼上的不同，本质上没有区别
    obj.sayName = function(){
    console.log("Hello 大家好 我是孙悟空~~~");
    };

    //console.log(obj.sayName);

    //当我们调用对象中的函数时，我们称我们在调用对象的方法
    //obj.sayName();

    var obj2 = {

    name:"沙和尚",
    age:38,
    sayName:function(){
    console.log("我是老沙~~~");
    }
    }

    obj2.sayName();

2.作用域:

/*
          * 作用域（Scope）
          *     - 作用域简单来说就是指一个变量的作用的范围
          *     - 在JS中作用域分成两种：
          *        1.全局作用域
          *        2.函数作用域
          *
          *     - 全局作用域：
          *        1.所有直接在script标签中编写的代码都在全局作用域中
          *        2.全局作用域在打开网页时创建，在网页关闭时销毁
          *        3.全局作用域中有一个全局对象window，
          *           window代表的是浏览器的窗口，
          *           在全局作用域中创建的变量都会作为window对象的属性保存
          *           在全局作用域中创建的函数都会作为window对象的方法保存
          *        4.在全局作用域中创建的变量都是全局变量，可以在页面的任意位置访问
          */

    var a = 123;
    var b = 456;

    //console.log(window.b);
    //console.log(window.c);

    function fun(){
        console.log(b);
        console.log("我是全局中的函数fun。。。。");
    }

    fun();

//window.fun();

3.变量的声明提前:

//如果不写var，直接为变量赋值，则相当于为window对象添加属性
 //window.a = 10;
 //a = 10;

/*
 * 变量的声明提前
 *     - 使用var关键字声明的变量，都会在所有的代码执行之前被声明，但是不会赋值
 *        赋值会直到执行到赋值的代码时才执行
 *     - 如果不适用var关键字声明变量，则不会有声明提前的特性
 *
 * 函数的声明提前
 *     - 使用函数声明创建的函数，会在所有的代码执行之前创建，
 *        所以我们可以在函数声明前就去调用函数
 *     - 使用函数表达式创建的函数，没有这个特性，所以不能在它创建之前调用
 */
 //console.log("a = "+a);

 var a = 10;

 //fun();
 //console.log(fun2);

 //使用函数声明来创建一个函数
 function fun(){
     console.log("我是fun函数。。。。");
 }

 //使用函数表达式创建一个函数
 var fun2 = function(){
     console.log("----->我是fun2.。。。");
     };

4.函数的作用域：

/*
* 函数作用域
* - 函数作用域可以理解为是全局中的小的作用域
* - 函数作用域在函数调用时创建，在调用结束时销毁
* 每调用一次函数就会创建一个新的函数作用域
* - 在函数作用域中可以访问到全局变量,
* 而在全局中无法访问到函数作用域中的变量
* 在函数中创建的变量如果不写var，则会变成全局变量
* - 当我们在函数中使用一个变量时，它会先在自身的作用域中寻找，
* 如果有就直接使用，如果没有则去上一级作用域中寻找，
* 找到则使用，没找到则继续寻找，直到找到全局作用域为止
* 如果全局作用域中依然没有，则报错ReferenceError
* - 在函数作用域中也适用变量和函数的声明提前
*
*/

 var a = "全局a";

    function fun(){
        var a = "--> 函数a";

        //如果在函数作用域中想访问全局变量可以通过window对象来访问
        console.log(window.a);
    }

   //fun();
         a = 20;

         /*
          * 在函数内部使用var关键字声明的变量也会被声明提前，
          *     它的声明会在所有的代码执行前执行
          *
          * 在函数内部使用函数声明创建的函数，也会在所有的代码执行之前被创建
          */
                    function fun2(){

                    fun3();
                    //console.log(a);

                    //var a = 10;

                    function fun3(){
                    console.log("我是fun2内部的函数。。。");
                    }

                    }

                    fun2();

5.练习

var a = 123;

     function fun(){
         alert(a);
         a = 456;

     }

     fun(); //123
     alert(a);//456


 var a = 123;

/*
 * 定义形参就相当于在函数中声明了对应的变量
 */


/*function fun(a) {
   alert(a);
   a = 456;
}

fun(); //undefined

alert(a); //123*/

 var a = 123;

 function fun(a) {
     alert(a);
     a = 456;
 }

 fun(123); //123

 alert(a); //123

6.this用法

//创建一个变量name
 var name = "全局中的name";

/*
 * 每次调用函数时，浏览器都会将一个对象作为隐藏的参数传递进函数
 *     这个对象就是函数执行的 上下文对象，我们可以通过this来引用该对象
 * 根据函数的调用的形式不同，this的值也不同：
 *     1.以函数的形式调用时，this永远都是window
 *     2.以方法的形式调用时，谁调用this就是谁
 */


 //创建一个函数
 function fun(){
   /*
    * 我们希望谁调用的函数，就可以输出谁的name属性
    *     window调用时，就输出window.name
    * obj 调用时 就输出 obj.name
    * obj2 调用时 就输出 obj2.name
    */
     console.log(this.name);

     //console.log(this == obj);
 }

 //创建一个对象
 var obj = new Object();
obj.name = "孙悟空";
                 obj.sayName = fun;

                 //创建一个对象
                 var obj2 = new Object();
                 obj2.name = "猪八戒";
                 obj2.sayName = fun;
                 //console.log(obj.sayName == fun);
                 //window.fun();
                 //obj.sayName();
                 //obj2.sayName();

                 //obj.sayName();
                 //fun();
                 //obj.sayName();
                 //fun();

                 //window.fun();

                 //obj2.sayName();

                 var obj3 = {

                 name:"沙和尚",
                 age:38,
                 sayName:function(){

                 function test(){
                 console.log(this.name);
                 }

                 test();
                 }
                 };

                 obj3.sayName();

7.使用工厂方法创建对象

/*
* 使用工厂方法来创建对象
*/
function createPerson(name , age , gender , address){

    //创建一个对象
    var obj = new Object();

    //向对象中添加属性
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.address = address;
    obj.sayName = function(){
        console.log("大家好，我是："+this.name);
    };

    //将对象返回
    return obj;

}

//调用函数
var person = createPerson("孙悟空",18,"男","花果山");
var person2 = createPerson("白骨精",16,"女","白骨洞");

8.使用构造函数创建对象

/*
          * 构造函数（constructor）
          *      构造函数是专门用来创建对象的函数
          *      构造函数就是一个普通的函数，不同的是构造函数需要通过new关键字来调用
          *      构造函数一般都是首字母大写
          *
          *     构造函数的执行的流程：
          *        1.创建一个新的对象
          *        2.将新创建的对象设置为函数中的this
          *        3.逐行执行函数
          *        4.将新建的对象作为返回值返回
          *
          * 如果以构造函数的形式调用，this就是新创建的那个对象
          *
          * 构造函数我们也可以称它为一个类，
          *     使用同一个构造函数创建的对象，我们称为一类对象
          *     通过构造函数创建的对象，我们称这个对象是该类的实例
          *
          */

    //创建一个人类的构造函数
    function Person(name , age){
        //通过this，向新对象中添加属性
        this.name = name;
        this.age = age;
        this.sayName = function(){
            console.log(this.name);
        };
    }


    function Dog(){

    }

    var p = new Person("孙悟空",18);
    var person2 = new Person("沙和尚",38);

    var dog = new Dog();


    //console.log(person);
    //person2.sayName();


    var a = new Person();
    var b = new Dog();

         /*
          * instanceof
          *     - 可以检查一个对象是否是一个类（构造函数）的实例
          *     - 语法：对象 instanceof 构造函数
          */
//console.log(b instanceof Person);

         /*
          * 所有的对象都是Object的后代
          */
//console.log(a instanceof Object);

//创建一个人类的构造函数
function Person(name , age){
//通过this，向新对象中添加属性
this.name = name;
this.age = age;

//向新的对象中添加一个sayName()方法
this.sayName = fun;
}
/*
* 在构造函数中我们为每一个对象都添加了一个sayName()方法，
* 而这个方法是在构造函数中创建的，构造函数每执行一次就要创建一个新的sayName()方法
* 每个对象中的sayName()方法都是不同，有几个对象就有几个sayName()
* 但是这些函数的功能又是一摸一样的，所以我们没有必要创造出这么多一摸一样的函数
*/

/*
* 将函数定义到全局作用域中 ，的确可以解决问题，但是将它定义到全局作用域将会导致全局作用域的命名空间被污染。
* 同样也导致我们程序运行不安全
*/
//将函数定义到构造函数的外部
function fun(){
　　console.log(this.name);
};



//创建一个Person
var per = new Person("孙悟空",18);
var per2 = new Person("唐僧",16);
var per3 = new Person("玉兔精",16);

//console.log(per.sayName == per2.sayName);
per3.sayName();

9.原型1

/*
          * 原型（prototype）
          *     - 我们每次创建一个函数浏览器都会为函数添加一个属性
          *        叫做prototype，这个属性对应的是一个对象
          *        这个对象就是我们说的原型对象。
          *     - 如果以仅仅以函数的形式去调用函数，则原型对象没有任何作用
          *     - 当以构造函数的形式调用函数时，它所创建的对象中都会有一个隐含的属性
          *        执行该函数的原型对象，我们可以通过__proto__来访问这个对象
          *
          *     - 所有的同一类型的对象他们都共享同一个原型对象，这个原型对象就相当于一个公共的区域
          *     - 当我们去调用一个对象的属性或方法时，它会先去对象自身中寻找,
          *        如果找到了则直接使用，如果没找到则去原型对象中寻找，如果原型中有则返回原型中的值
          *        如果原型中没有，则去原型的原型中寻找，找到了则直接使用依次类推。。。
          *        注意：Object的原型的原型为null，所以会一直找Object的原型，
          *           如果他里面依然没有，则返回undefined
          *     - 我们可以将对象中共有的属性或方法统一添加到原型中，
          *        这样我们不用添加多个重复的属性或方法，也不会污染全局作用域
          */

    function MyClass(){

    }

//向函数的原型对象中添加一个属性
         MyClass.prototype.hello = "你好";

                    MyClass.prototype.fun = function(){
                    alert("我是原型中的fun");
                    };

                    //创建MyClass的实例
                    var mc = new MyClass();
                    var mc2 = new MyClass();
                    var mc3 = new MyClass();

                    mc.hello = "mc的你好";

                    //console.log(mc3.__proto__ == MyClass.prototype)

                    //console.log(mc2.hello);

                    //mc2.fun();

                    //创建一个人类的构造函数
                    function Person(name , age){
                    //通过this，向新对象中添加属性
                    this.name = name;
                    this.age = age;
                    }

                    //向Person的原型中添加sayName()
                    Person.prototype.sayName = function(){
                    console.log(this.name);
                    };

                    var per = new Person("孙悟空",18);
                    var per2 = new Person("唐僧",16);
                    var per3 = new Person("玉兔精",16);

                    per3.sayName();

10.原型2

//创建一个人类的构造函数
    function Person(name , age){
        //通过this，向新对象中添加属性
        this.name = name;
        this.age = age;
    }

//向Person的原型中添加sayName()
         Person.prototype.sayName = function(){
                    console.log(this.name);
                    };

                    //创建一个Person的实例
                    var per = new Person("孙悟空",18);

                    //当我们打印一个对象时，控制台往往会输出 [object Object]
                    //此时实际上输出的内容是对象的toString()方法的返回值
                    var str = per.toString();
                    //console.log(str);

                    //检查per中是否有toString
                    //如果属性在对象的原型中，使用in也会返回true
                    //console.log("toString" in per);

                    //console.log(per.hasOwnProperty("toString")) ;

                    //console.log(per.__proto__.__proto__.hasOwnProperty("toString"));

                    //console.log(Object.prototype.__proto__);

                    //修改per的toString()
         /*per.toString = function(){
            //return "我是一个可爱的Person" ;
            return "Person[name = "+this.name+" ，age = "+this.age+"]";
         };*/

                    //修改Person原型的toString
                    Person.prototype.toString = function(){
                    //return "我是一个可爱的Person" ;
                    return "Person[name = "+this.name+" ，age = "+this.age+"]";
                    };

                    var per2 = new Person("白骨精",16);

                    console.log(per);