js面向对象

Posted 2020-08-09

 

 <!--基本概念-->

  //面向对象和面向过程

  //1、面向对象是一种编程思想，很多语言是面向对象，eg：java JS c++ oc等

  //2、所有面向对象的语言有三大特征：1、封装；2、继承；3、多态

  //3、在面向对象的思想里有一种非常重要的理论是“万物皆对象”

   //4、面向对象中有“类和对象”的概念

   类:是具有相同特征和行为的事物的抽象

   对象(实例):类的具体化

   特征——>属性 行为->方法

  //5、js中的数据类型分为两大类

  //5.1、原始类型：number boolean string 空类型 未定义类型（原始类型就是存储一些简单的数据）

  //5.2、引用类型：Array Date Function Error Reg Object等

  //其中Object是一个什么都没有的空类

  //以上是理论，面试中容易问

 </script>

 <!--声明一个自定义的类-->

 <script type="text/javascript">

  //var arr=new Array();//标准写法：其中Array就是一个系统类

  var arr = [2, 3, 4]; //字面量写法

  var a = 10;

  arr.a = 5;

  //对象的属性和变量本质上无任何区别，只是属性归属于对象

  function testA() {

   alert(1111);

  }

  arr.fn = testA(); //属性

  //方法和函数的区别：方法归属于对象

 

  //给系统的数组对象添加属性（类比给document添加事件）

  arr.show = function() {

   alert(this); //this表示当前方法属于谁！

  }

  arr.show();

 </script>

 <!--自定义的类-->

 <script type="text/javascript">

  //声明一个系统类Object()的对象

  var per = new Object();

  per.name = "小王";

  per.age = 10;

  per.height = 1.82;

  per.intro = function() {

   alert("这个人的名字是:" + this.name);

  }

  per.intro();

  var per2 = new Object();

  per2.name = "大王";

  per2.age = 12;

  per2.height = 1.62;

  per2.intro = function() {

   alert("这个人的名字是:" + this.name);

  }

  per2.intro();

  //这里声明了两个对象per和per2

 </script>

 <!--=工厂方法-->

 <script type="text/javascript">

  function creatPerson(name, age, height) {

   //相当于工厂里的原料：

   var per = new Object();

   //给自定义添加属性

   //相当于加工

   per.name = name;

   per.age = age;

   per.height = height;

   per.intro = function() {

     alert("这个人的名字是:" + this.name);

    }

    //相当于出厂

   return per;

  }

  //原料+加工+出厂 称之为工厂方法（面试）

  //creatPerson（）称之为构造函数

  //快速创建一个对象per1和per2

  var per1 = creatPerson("aaa", 10, 1.22);

  var per2 = creatPerson("bbb", 12, 1.65);

 

  //new的作用：自动声明空对象，自动返回

  //上述工厂方法的第二个问题：下面结果为false

  alert(per1.intro == per2.intro);

 

 <!--上述工厂方法缺陷2-->

 

  //类名.原型.属性

  creatPerson.prototype.intro = function() {

   alert("这个人的名字是:" + this.name);

  }

 

  //当获取某对象的属性的值得时候，系统会首先判断该对象是否有这个属性，如果有就返回该值，如果没有，就去构造函数的原型中去找是否有该属性

  //如果还没有，就去Object的构造函数的原型中去找，如果都没有，就返回underfined

  //上述查找属性值的过程称之为“原型链”（面试）

  //obj.name;

  /*

   面试易考点（前端）

   1、常用的布局方式

   2、动画处理

   3、多线程

   4、第三方框架的使用

   5、js中冒泡和捕获

   6、原型链

   */

  

<!--

 原生js和面向对象的区别：

 1、前者思考成本低，速度快

    后者可利于维护，思考成本高

 2、前者使用不便

    后者使用极为方便

 注意：tab切换面向对象的写法 要求 会手写！！！（面试常问） 

-->

 

<!--

 将已有代码改成面向对象的写法需要满足

 1、所有代码在onload内部（相当于面向对象里的构造函数）

 //改写技巧

 2、onload相当于面向对象中的 构造函数 ，都是进行初始化操作

 3、变量相当于对象的属性

 4、函数相当于对象的方法

 5、注意：不允许出现函数嵌套函数（为了优化内存）

 总结：面向对象中的80%的坑都来自于this!!

-->

 

//垃圾回收机制：

  //当函数执行完毕，系统会自动回收函数和其内部局部变量所占的内存，当再次调用函数时，重新申请内存。

  //闭包：函数嵌套时，内部函数中可以使用外部函数的变量或者形参

  //闭包中的变量在内存中永久存在

 

//闭包的好处

  //避免全局变量被污染

 

//匿名函数自调用

  //这种写法，函数会自调用一次(function(){})();

 

//构造函数伪装---->在子类中调用父类的属性赋值

   //call:调用父类的构造函数

   //this指new出来的Worker对象

   //继承第一步：通过call方法实现继承父类属性

 

//直接交换原型，会把原型包含的所有属性全都自动赋值

  //继承第二步：通过给原型直接赋值

 

//常量不能赋值

  //系统的转成大写的方法 toLocaleUpperCase();