4月27日学习 - 《JavaScript》

[TOC]

ps：写项目去了，没看多少。

全局作用域

window作为全局对象
创建的变量作为window对象的属性保存
创建的函数作为window方法的属性保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
      fun();//success
        fun2();//flase
    function fun(){
      alert(1);
    }
    var fun2 = function{
      alert(2);
    }
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

函数作用域

函数作用域可以访问到全局变量，相反不行。
当在函数作用域操作一个变量时,它会先在自身作用域中寻找。
在函数里面想用全局的变量： window.a;
使用var关键字声明的变量,会在函数中所有的代码执行之前被声明

函数声明也会在函数中所有的代码执行之前执

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
    var a = 30;
  function fun(){
    console.log(a);
    a =10;//在函数中,不使用var声明的变量都会成为全局
  }
  fun();
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

Debug

sources 找到html去打断点添加监控一步步调试

This

this的情况
1.当以函数的形式调用时,this是 window
2.当以方法的形式调用时,谁调用方法this就是谁
3.当以构造函数的形式调用时,this就是新创建的那个对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
  function fun(){
    console.log(this);
  }
  fun();

  //解析器在调用函数每次都会向函数内部传递进一个隐含的参数
      //这个隐含的参数就是this,this指向的是一个对象
      //这个对象我们称为函数执行的上下文对象
  //根据函数的调用方式的不同,this会指向不同的对象,this指的对象
  var obj={
    name:"Tom",
    sayName:fun
  };
  obj.sayName();//object
  fun();//window
  //以函数形式调用，永远就是window
  //以方法形式调用，this就是调用方法的那个对象

  function fun(){
    console.log(this.name);
  }
  var obj={
    name:"Tom",
    sayName:fun
  };
  var obj2={
    name:"Jack",
    sayName:fun
  };
  obj.sayName();
  obj2.sayName();
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

使用工厂方法创建对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
    var obj = {
      name:"Tom",
      age:18,
      gender:"男",
      sayName:function{
              alert(this.name)
          }
  };

  //使用工厂方法
  function creat(name,age,gender){
      var obj = new object();
          obj.name=name;
        obj.age=age;
        obj.gender=gender;
          obj.sayName:function{
              alert(this.name)
          };
    return obj;
  }
  var obj = creat("Anna",18,"女");

</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

构造函数

构造函数的执行流程
1.立刻创建一个新的对象
2,将新建的对象设置为函数中this
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
我们将通过一个构造函数创建的对象,称为是该类的实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
  //创建构造函数,专门来创建对象的
  function Person(name,age){
        this.name=name;
        this.age=age;
  }
  var per = new Person("Tom",18);//与普通函数的差别在于用new
  console.log(per.name);
  console.log(per instanceof Person);//true
  console.log(per instanceof Object);//true
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

优化

创建一个 Person构造函数在
Person构造函数中,为每一个对象都添加了一个sayName方法,
目前我们的方法是在构造函数内部创建的
也就是构造函数每执行一次就会创建 sayName方法
也是所有实例的 sayRam都是唯一的。
这样就导致了构造函数执行一次就会创建一个新的方法
执行10000次就会创建10000个新的方法 ```html <!DOCTYPE html>

<a name="cEPnX"></a>
### 原型对象 prototype
将 sayName方法在全局作用域中定义
<br />将函数定义在全局作用域,污染了全局作用域的命名空间
<br />而且定义在全局作用域中也很不安全

---

我们所创建的每一个函数,解析器都会向函数中透加一个属性 prototype<br />如果函数作为普通函数调用 prototype没有任何作用
<br />当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性
<br />指向该构造函数的原型对象,我们可以通过_proto_来访问该属性
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
    //创建构造函数,专门来创建对象的
    function fun(){

    }
     var per = new fun();
     var per2 = new fun();
     var per3 = new fun();
    console.log(per._proto_ == per._proto_ ==fun.prototype);//true

    //原型对象就相当于一个公共的区域,所有同一个类的实例都可以访回到这个原型对象
        //我们可以将对象中共有的内容,统一设置到原型对象中
    fun.prototype.a=123;
     console.log(per.a);
    per2.a="我是mac2中的a";//就不到prototype中找了

    //跑到原型里面找
    fun.prototype.sayHello=function{
            alert("Hello");
    }
    per.sayHello();

    //可以使用对象的 hasOwnProperty()来检查对象自身中是否含有该属性
        console(per.hasOwnProperty("a"));//只有自身有才返回true
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

以后我们创建构造函数时,可以将这些对象共有的属性和方法统一添加到构造函数的原型对象中
这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
使用in检查对象中是否含有某个属性,如果对象中没有但是原型中有,也会返回true。
per的原型是fun，fun的原型是Object，Object没有原型结果是null