js高级学习笔记

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/litcangosh/article/details/100635812

• 面向对象的编程思想

面向过程:凡事都是亲力亲为,所有的代码都要自己写,每一步都要很清楚,注重的是过程

面向对象的编程思想:根据需求,分析对象,找到对象有什么特征和行为,通过代码的方式来实现需求,要想实现这个需求,就要创建对象,要想创建对象,就应该先有构造函数,然后通过构造函数来创建对象.,通过对象调用属性和方法来实现相应的功能及需求,即可。

• 原型定义

1.定义

构造函数中有一个属性prototype,是原型,程序员使用的
实例对象中有一个属性__proto__,是原型,浏览器使用的,不是很标准的,
实例对象中的__proto__指向的就是该实例对象中的构造函数中的prototype
构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用
正常的写法:实例对象.__proto__才能访问到构造函数中的prototype中的属性或者方法
per.__proto__.eat();//__proto__不是标准的属性
per.eat();
原型就是属性,而这个属性也是一个对象
Person.prototype--->是属性
Person.prototype.属性或者Person.ptototype.方法()

2.为什么要用原型？

在构造函数中定义的属性和方法，当实例化对象时，方法和属性都在实例化对象的内存空间中，如果创建多个实例对象，每个对象的属性和方法都会单独开空间，为了节省空间，实现数据共享，我们把需要共享的属性和方法都写在构造函数的原型对象中。

3.原型的作用

1）数据共享   目的是为了节省内存空间

2)   实现继承   目的也是为了节省内存空间

• 原型链

原型链就是一种关系，是指实例对象和原型对象的关系，它们通过原型(__proto__)来联系的。

• 关于原型指向改变的问题

1.原型指向可以改变
实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象
构造函数的原型对象(prototype)指向如果改变了,实例对象的原型(__proto__)指向也会发生改变

2.下面一段代码解释了原型链的最终指向

 function Person() {

    }
    Person.prototype.eat=function () {
      console.log("吃东西");
    };

    var per=new Person();
    console.dir(per);//Person
    console.dir(Person);//f Penson()
   console.log(per.__proto__==Person.prototype);//true
    console.log(per.__proto__.__proto__==Person.prototype.__proto__);//true
    console.log(Person.prototype.__proto__==Object.prototype);//true
    console.log(Object.prototype.__proto__);//null

实例对象中有__proto__原型
构造函数中有prototype原型
prototype是对象
所以,prototype这个对象中也有__proto__,那么指向了哪里
实例对象中的__proto__指向的是构造函数的prototype
所以,prototype这个对象中__proto__指向的应该是某个构造函数的原型prototype
Person的prototype中的__proto__的指向
console.log(Person.prototype.__proto__);
per实例对象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null

3.原型指向改变如何添加方法和访问

如果原型指向改变了,那么就应该在原型改变指向之后添加原型方法

• 继承

JS不是一门面向对象的语言,JS是一门基于对象的语言,那么为什么学习js还要学习面向对象,因为面向对象的思想适合于人的想法,编程起来会更加的方便,及后期的维护....

 面向对象的编程语言中有类(class)的概念(也是一种特殊的数据类型),但是JS不是面向对象的语言,所以,JS中没有类(class),但是JS可以模拟面向对象的思想编程,JS中会通过构造函数来模拟类的概念(class) *

面向对象的三大特性：封装   继承  多态

 封装:就是包装
 一个值存储在一个变量中--封装
 一些重复代码放在一个函数中--封装
 一系列的属性放在一个对象中--封装
 一些功能类似的函数(方法)放在一个对象中--封装
  好多相类似的对象放在一个js文件中---封装

 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承
 继承也是为了数据共享,js中的继承也是为了实现数据共享。 
 继承是一种关系:
 父类级别与类级别的关系，
 比如：
 动物：姓名，体重，吃东西的行为
 狗：姓名，体重，颜色，吃东西的行为，咬人的行为
 二哈：姓名，体重，颜色，性别，吃东西的行为，咬人的行为，拆家的行为

多态:一个对象有不同的行为,或者是同一个行为针对不同的对象,产生不同的结果,要想有多态,就要先有继承,js中可以模拟多态,但是一般不会去使用

下面是一个关于继承的小demo

  //通过改变原型指向来实现继承
    //动物：姓名，体重，吃东西的行为
    //狗：姓名，体重，颜色，吃东西的行为，咬人的行为
    //二哈：姓名，体重，颜色，性别，吃东西的行为，咬人的行为，拆家的行为
    function Animal(name,weight) {
        this.name=name;
        this.weight=weight;
    }
    Animal.prototype.eat=function () {
        console.log("吃东西");
    };
    function Dog(color) {
        this.color=color;
    }
    //改变狗的原型指向
    Dog.prototype=new Animal("小黑",100);
    Dog.prototype.bite=function () {
      console.log("咬了");
    };
    function erHa(sex) {
        this.sex=sex;
    }
    //改变二哈的原型指向
    erHa.prototype=new Dog("green");
    erHa.prototype.demolition=function () {
      console.log("拆了家");
    };
    var er=new erHa("男");
    console.log(er.name,er.sex,er.weight,er.color);//小黑，男，100，green
    er.bite();//咬了
    er.eat();//吃东西
    er.demolition();//拆了家

• JS中实现继承的四种方法

1.通过改变原型的指向来实现继承

缺陷:因为改变原型指向的同时实现继承,直接初始化了属性，继承过来的属性的值都是一样的了,所以,这就是问题 只能重新调用对象的属性进行重新赋值。
解决方案:继承的时候,不用改变原型的指向,直接调用父级的构造函数的方式来为属性赋值就可以了------借用构造函数:把要继承的父级的构造函数拿过来,使用一下就可以了

2.借用构造函数：构造函数名字.call（当前对象，属性，属性......）

解决了属性继承,并且值不重复的问题

缺陷:父级类别中的方法不能继承

  function Person(name, age, sex, weight) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.weight = weight;
    }
    Person.prototype.sayHi = function () {
      console.log("您好");
    };
    function Student(name,age,sex,weight,score) {
      //借用构造函数
      Person.call(this,name,age,sex,weight);
      this.score = score;
    }
    var stu1 = new Student("小明",10,"男","10kg","100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);

    var stu2 = new Student("小红",20,"女","20kg","120");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);

    var stu3 = new Student("小丽",30,"妖","30kg","130");
    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);

3.组合继承

就是利用原型指向改变和借用构造函数的两种继承方法来共同使用。原型继承解决了方法的继承     借用构造函数继承解决了属性值相同的问题。

  //原型实现继承
    //借用构造函数实现继承
    //组合继承:原型继承+借用构造函数继承

    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    Person.prototype.sayHi=function () {
      console.log("阿涅哈斯诶呦");
    };
    function Student(name,age,sex,score) {
      //借用构造函数:属性值重复的问题
      Person.call(this,name,age,sex);
      this.score=score;
    }
    //改变原型指向----继承
    Student.prototype=new Person();//不传值
    Student.prototype.eat=function () {
      console.log("吃东西");
    };
    var stu=new Student("小黑",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);//小黑，20，男，100分
    stu.sayHi();//阿涅哈斯诶呦
    stu.eat();//吃东西
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);//小黑黑，200，男人，1010分
    stu2.sayHi();//阿涅哈斯诶呦
    stu2.eat();//吃东西

    //属性和方法都被继承了

4.拷贝继承

把一个对象中的属性或者方法直接复制到另一个对象中

function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男";
    Person.prototype.height=100;
    Person.prototype.play=function () {
      console.log("玩的好开心");
    };
    var obj2={};
    //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法

    for(var key in Person.prototype){
      obj2[key]=Person.prototype[key];
    }
    console.dir(obj2);
    obj2.play();//玩的好开心

• 函数声明和函数表达式

    //函数声明
//
//    if(true){
//      function f1() {
//        console.log("哈哈了");
//      }
//    }else{
//      function f1() {
//        console.log("嘻嘻");
//      }
//    }
//    f1();


    //函数表达式

    var ff;
    if(true){
      ff=function () {
        console.log("哈哈");
      };
    }else{
      ff=function () {
        console.log("嘻嘻");
      };
    }
    ff();

    //函数声明如果放在if-else的语句中,在IE8的浏览器中会出现问题
    //以后宁愿用函数表达式,都不用函数声明

• 函数中this指向问题以及严格模式

普通函数中的this是谁?-----window
对象.方法中的this是谁?----当前的实例对象
定时器方法中的this是谁?----window
构造函数中的this是谁?-----实例对象
原型对象方法中的this是谁?---实例对象

当在严格模式下运行时

    //严格模式:
   "use strict";//严格模式
   function f1() {
   console.log(this);//window
   }
   f1();//undefined
    window.fi();//window

• 数组函数的调用

  //数组可以存储任何类型的数据，函数也是一种数据类型

    var arr=[
        function () {
          console.log("快乐");
        },
        function () {
          console.log("开心");
        }
        ,
        function () {
          console.log("健康");
        }
        ,
        function () {
          console.log("安全");
        },
        function () {
          console.log("如意");
        }
    ];
    //回调函数:函数作为参数使用  ele：数组中的每个元素
    arr.forEach(function (ele) {
      ele();
    });

arr.forEach()方法对数组的每个元素执行一次提供的函数

forEach 方法按升序为数组中含有效值的每一项执行一次callback （回调函数）函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

callback（回调函数）接收三个参数：数组当前项的值(ele)   数组当前项的索引(index)  数组本身(arr)