JavaScript面向对象学习总结(1.0)

前言

学习JS一段时间,今天把学习的一些内容总结了一下,发表于此

面向对象

• 面向过程:面向过程就是分析解决问题的步骤,一步一步的解决问题
• 面向对象:面向对象就是把问题分解成个个对象,通过对象来解决问题,而我们只需要发出指令就可以

面向对象的实现方式

主流一般有两种实现方式

• 基于类的面向对象
• 基于原型的面向对象

JS是基于原型的面向对象

面向对象的三大特征

• 封装

  也就是把客观事物封装成抽象的类或具体的对象，并且类或对象可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。

• 继承

  可以让某个类型的对象获得另一个类型的对象的属性的方法

• 多态

  不同实例的相同方法在不同情形有不同表现形式。多态机制使具有不同内部结构的对象可以共享相同的外部接口。

对象的创建方式

字面量方式创建

<script>
  //用大括号括起来的一系列的键值对，就构成了JavaScript对象。这种对象称之为字面量对象。
var person = {
  name : "张三",//name是属性名,"张三"是属性值
  age : 20,
  speak : function(){//属性的值是函数,更喜欢把这样的属性称之为方法
    alert("说话");
  }
}
</script>

• 字面量方式创建的缺点:使用同一个接口创建很多对象，会产生大量的重复代码

工厂模式创建

<script>
  function person(name,age,speak){
    var Obj = {};
    Obj.name = name;
    Obj.age = age;
    Obj.speak = function(){
      alert("说话");
    }
    return Obj;
  }
</script>

<script>
  function person(name,age,speak){
    var Obj = new Object();
    Obj.name = name;
    Obj.age = age;
    Obj.speak = function(){
      alert("说话");
    }
    return Obj;
  }
</script>

<script>
  function person(name,age,sex){
    return {name,age,sex};//ES6新增,必须参数和属性名相同才可以这样写,否则就要向下面一样
  }
</script>

<script>
  function person(name1,age1,sex1){
    return {
      name : name1,
      age : age1,
      sex : sex1
    };
  }
</script>

• 工厂模式创建虽然解决了重复代码问题,但是还是没有解决对象类型识别的问题

构造函数方式创建

<script>
  function Person(name,age){
    this.name = name;
    this.age = age;
  }
var p = new Person("张三",20);
console.log(p);
</script>

1. 使用构造函数创建对象，必须使用关键字new ，后面跟着构造函数的名，根据需要传入相应的参数。
2. 其实使用 new 构造函数() 的方式创建对象，经历了下面几个步骤。
   
   • 创建出来一个新的对象
   • 将构造函数的作用域赋给新对象。意味着这个时候 this就代表了这个新对象。
   • 执行构造函数中的代码。 在本例中就是给新对象添加属性，并给属性初始化值。
   • 构造函数执行完毕之后，默认返回新对象。 所以外面就可以拿到这个刚刚创建的新对象了。

访问对象的属性

• 访问一个对象的属性，我们可以直接通过 对象.属性名 和 对象[属性名] 来访问

alert(person.name);  // 访问person对象的 name属性值
person.age = 30;  //修改person对象的 age 属性
person.eat();  //既然是调用方法(函数) 则一定还要添加 ()来表示方法的调用
alert(person["name"]);  //

两种使用方式有一些不同的地方：

1. 对象.属性名的方式，只适合知道了属性的名字，可以直接写。比如： person.age 。如果属性名是个变量，则这种方法无效， 对象.变量名 会出现语法错误。
2. 对象[属性名]，这种方式使用无限制。如果是字符串常量，则应该用”“或”引起来，如果是变量，可以直接使用

删除对象的属性

• 使用delete 操作符去删除

// 使用delete操作关键字，删除person对象的属性age
delete person.age;
alert(person.age);  //弹出undefined。表示这个属性没有定义

添加对象的属性

//给person对象的属性 girlFriend 赋值。在赋值的过程中，首先会判断这个属性在JavaScript中是否存在，如果存在就对这个
//属性重写赋值。如果不存在，就给这个对象添加这个属性，并赋值。
person.girlFrient = "小丽";  

//给对象添加方法
person.play = funcion(){
    alert("大家high起来");
}

修改对象的属性

// 把person对象的sex属性的值修改为 女
person.sex = "女";
person.eat = funcion(){
    alert("吃货");
}
person.eat();  //吃货

结束语

今天先写到这里,写的不对的地方希望大家留言指正,谢谢