首页 > 代码库 > js面向对象

js面向对象

2024-08-14 12:15:38   222人阅读

 

 <!--基本概念-->
  //面向对象和面向过程
  //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();
 
 
 
 
 
 

js面向对象


联系
我们