JS进阶(一)(面向对象、原型)

时间 2019-12-04

标签进阶面向对象原型栏目 JavaScript 繁體版

原文原文链接

JavaScript分三个部分：

ECMAScript标准：JS 的基本语法
DOM：Document Object Model
BOM：Browser Object Model

JavaScript 是什么

解析执行：轻量级解释型的，或是 JIT(即便编译）编译型的程序设计语言
语言特色：动态，头等函数 (First-class Function)
- 又称函数是 JavaScript 中的一等公民
执行环境：在宿主环境（host environment）下运行，浏览器是最多见的 JavaScript 宿主环境
- 可是在不少非浏览器环境中也使用 JavaScript ，例如 node.js
编程范式：基于原型、多范式的动态脚本语言，而且支持面向对象、命令式和声明式（如：函数式编程）编程风格

编程思想：

面向过程：全部事情都是亲力亲为，注重的是过程
面向对象：执行者成为指挥者，只要找对象，而后让对象作相关的事情，注重的是结果
js不是一门面向对象的语言，是基于对象的语言，用js来模拟面向对象
面向对象的特性 :封装，继承，多态，(抽象性)
- 封装: 就是包装，把一些重用到内容进行包装,须要到时候,直接使用(例如把一个值，存在一个变量中，把一些重用代码放在函数中，把不少相同功能多函数放中一个对象中)
- 继承: 类于类之间的关系，js中没有类的概念，但有构造函数但概念，是能够有继承的，是基于原型.
- 多态: 同一个行为，针对不一样但对象，产生类不一样但效果
面向对象的编程思想：根据需求，抽象出相关对象，总结对象的特征和行为，把特征变成属性，行为变成方法，而后定义(js)构造函数，实例化对象，经过对象调用属性和方法，完成相应的需求

建立对象的方式

对象: 具体特指的某个事物,具备特征(属性)和行为(方法)，能够看做是一堆无序属性的集合
- 特征--->属性
- 行为--->方法
建立对象三种方式：
1. 字面量的方式（一次只能建立一个）
  - 实例对象
```
var person1 = {
       name:"xxx",
       age:"xxx",
       eat:function(){}
   };
复制代码
```
2. 调用系统的构造函数（建立出来的对象都是Object类型的）
```
var person2 = new Object();
    person2.name = "xxx";
    person2.age = "xxx";
    person2.eat = function(){};
复制代码
```
3. 自定义构造函数方式(优化后的工厂模式)
```
function Person(name,age){
        this.name = name;
        this.age = age;
        this.eat = function(){};
    }
    //建立对象--->实例化一个对象的同时对属性进行初始化
    var person3 = new Person("xx",11);
复制代码
```
  - 1. 申请空间存储对象
    2. this就是当前实例化的对象
    3. 设置对象中的属性和方法(为对象添加属性和方法，为属性和方法赋值)
    4. 把建立后的对象返回都是须要经过new的方式
- 一、2中方式建立的对象属于Object类型，3中建立的对象属于Person(建立的自定义对象)

工厂模式和自定义构造函数的区别

工厂模式：

function createObject(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.eat = function(){};
        return obj;
    }
复制代码

自定义构造函数：

function Person(name,age){
        this.name = name;
        this.age = age;
        this.eat = function(){};
    }
    //建立对象--->实例化一个对象的同时对属性进行初始化
    var person3 = new Person("xx",11);
复制代码

区别：
- 共同点：都为函数，可建立对象，可传入参数
- 不一样点：
  - 工厂模式：
    - 函数名为小写
    - 有new，有返回值
    - new以后的对象是当前的对象
    - 直接调用函数就能够建立对象
  - 自定义构造函数：
    - 函数名是大写(首字母)
    - 没有new，没有返回值
    - this是当前的对象
    - 经过new的方式来建立对象

构造函数和实例对象之间的关系

面向对象的思想是--->抽象的过程--->实例化的过程

function Person(name,age){
        this.name = name;
        this.age = age;
        this.eat = function(){};
    }
    //构造函数--->实例对象
    var per = new Person("xx",11);
    console.log(per.constructor == Person);//true
    console.log(per instanceof Person);//true
复制代码

实例对象和构造函数之间的关系：
- 实例对象是经过构造函数来建立的--建立的过程叫实例化
- 判断对象是否为该数据类型
  - 经过(原型)构造器的方式实例对象.构造器 == 构造函数名字
  - 对象 instanceof 构造函数名字

原型

原型：html
- 实例对象中有__proto__这个属性叫原型，也是一个对象，这个属性是给浏览器使用，不是标准的属性--->proto--->能够叫原型对象
- 构造函数中有prototype这个属性叫原型，也是一个对象，这个属性是给程序员使用，是标准的属性--->prototype--->能够叫原型对象 可经过原型来添加方法，解决数据共享，节省内存空间
实例对象的__proto__和构造函数中的prototype相同--->true，又由于实例对象是经过构造函数来建立的，构造函数中又原型对象prototype，因此实例对象的__proto__指向了构造函数的原型对象prototypenode
原型的做用之一：共享数据，节省空间程序员
- 属性须要共享，方法也须要共享
- 不须要共享的数据写在构造函数中，须要共享的数据写在原型中

简单的原型语法(缺陷：须要手动修改构造器的指向)编程

Object.prototype = {
    //手动修改构造器指向
    constructor:Student,
    attribute:"xxx",
    method: function(){};
};
复制代码

原型中的方法是能够互相访问的json

function Object(name,age){
    this.name = name;
    this.age = age;
}
Object.prototype.method1 = function(){
    console("method1");
    this.method2;
};
Object.prototype.method2 = function(){
    console("method2");
    this.method1;
};
var obj = new Object("xx",11);
obj.method1();// method1 method2
obj.method2();// method2 method1

复制代码

原型的使用实例浏览器

<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv" style="width: 300px;height: 200px;background-color: red"></div>
<script src="common.js"></script>
<script>
    /**
    * 改变元素样式内容
    *@param btnObj 按钮对象
    *@param dvObj 盒子对象
    *@param josn 改变的样式信息
    */
    function ChangStyle(btnObj,dvObj,json){
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
    }
    //为ChangStyle的原型对象添加方法
    ChangStyle.prototype.init = function(){
        var that = this;//存储ChangStyle实例对象
        this.btnObj.onclick = function(){ 
            for(var key in that.json){
                that.dvObj.style[key] = that.json[key];
                }
        };
    };
    
    //实例对象
    var json = {"width" : "500px", "height" : "800px", "background" : "blue", "opacity": "0.2"};
    var btn = document.getElementById("btn");
    var dv = document.getElementByID("dv");
    var cs = new ChangStyle(btn,dv,json);
    cs.init();
    //调用方法
</script>
</body>
</html>
复制代码

构造函数和实例对象和原型对象之间的关系bash
- 构造函数：能够实例化对象，有一个属性叫作prototype,是构造函数的原型对象.原型对象prototype中有一个constructor构造器，这个构造器指向的就是本身所在的原型对象所在的构造函数。
- 实例对象：
  - 实例对象的原型对象(proto)指向的是该构造函数的原型对象。构造函数的原型对象(prototype)中的方法是能够被实例对象直接访问的
  - 实例对象使用的属性或方法，先在实例中查找如有是则使用，若无再到实例对象的__proto__指向的原型对象prototype中寻找，如有则使用，若无则报错

为系统的对象的原型中添加方法函数式编程

例如倒序输出字符串方法

String.prototype.myReverse=function () {
      for(var i=this.length-1;i>=0;i--){
          console.log(this[i]);
    }
  };
  var str="abcdefg";
  str.myReverse();//g f e d c b a (隔行输出的)
复制代码

局部变量变成全局变量(把局部变量给window)函数

//函数的自调用--自调用函数
    function(){
        var num = 10;//局部变量
    };)();
    console.log(num); //报错
    //win形参  window实参
    (function(win){
        var num = 10;
        win.num = num;
    })(window);
    console(num);//10
复制代码

js是一门动态类型的语言，对象没有属性点.出来就有了

------------------------------------------------------记录于 2019.4.20 JavaScript高级(一)优化