面向对象

面向对象

编程思想:编程

1.面向过程编程(OPP/POP) Oriented Procedure Programming:以事件为中心设计模式

2.面向对象编程(OOP)Object Oriented Programming :以事物为中心函数

(1)要经过分析出来的事物的公共的特征和行为,去建立对应的类(class)this

(2)经过类(class),去建立对应的对象(object)spa

类:类是具备相同特征和行为的事物的抽象,相似于模板

对象:对象是类的实例,是由类创造出来的

JS里是没有类的,可是有一个功能与类类似的东西---函数prototype

这个函数有一个专门的名字---构造函数
构造函数看起来有两个最大的特色:

1.名字首字母大写

2.调用的时候须要new关键字配合

JS建立对象的两种方式:

1.字面量(语法糖)建立对象
语法:var obj = {
            属性名1:属性值1,
            属性名2:属性值2,
            ...
            方法名1:匿名函数1,
            方法名2:匿名函数2,
            ...
};

如何操做一个函数:设计

点语法:既可设置,也能够获取对象的属性对象

对象.属性名blog

例子:建立一个学生对象,属性包括:姓名,年龄,性别,学校,专业;方法包括:上课,考试,作做业,函数里只须要输出一行log便可
        var stuObj = {
        //属性
        name = '张三'
        age = '18',
        sex = '女'
        school = '郑州大学'
        专业:'计算机科学与技术'
        friend:{
              name:'李四'
              age:'25',
              sex:'男'
              hobby:['登山''蹦极']
        },
        //方法
        shangke:function(){console.log("上课"); },
        kaoshi:function(){console.log("考试");},
        homework:function(){console.log("作做业");},
        intruduce:function(){
            //在对象方法里的this,代指的就是方法所属的对象
            console.log(`你好,我叫${this.name},年龄是${this.age},学校为${this.school}`);
        }
        }
        console.log(stuObj);
        stuObj.intruduce();//此时的this表明的是stuObj
        console.log(stuObj.shangke());//上课   undefine
        //打印的是‘stuObj.shangke()’的返回值,而这个方法没有返回值,因此他会先打印‘上课’,而后再打印undefine
       
          var abc = stuObj.introduce;//此时abc为introduce的函数体
          abc();//window.abc();此时的this指向的是window

//工厂模式建立对象 设计模式继承

function creatStu(name,stu,sex){
   var stu = {
       name:name,
       age:age,
       sex:sex,
       sayHi:function(){
           console.log(`你好,我叫${this.name},年龄${this.age},性别是${this.sex}.`);
      }
  }
   return stu;
}
 var stu1 = creatStu("张三",20,"男");
 var stu2 = creatStu("李四",25,"女");
 var stu3 = creatStu("王五",27,"男");
 stu1.sayHi();//你好,我叫张三,我今年20,性别是男
 stu1.sayHi();//你好,我叫李四,我今年23,性别是女
 stu1.sayHi();//你好,我叫王五,我今年20,性别是人妖
2.构造函数建立对象
function Student(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var stu1 = new Student("张三",20,"男");
console.log(stu1);

JS面向对象里的重要概念

function Person(name,age,sex,nation,sayHi){
this.name = name;
this.age = age;
this.sex = sex;
}

1.原型对象(prototype) ***

(1)原型对象是一个对象,它属于构造函数,JS会为每个构造函数内置一个原型对象,能够经过语法:

         函数名.prototype

(2)由于原型对象是对象,因此能够分为为其新增属性或者方法,給原型对象新增的属性或者方法,能被所属的构造函数建立的任何一个实例对象所共同拥有

//为上面构造函数新增nation属性和sayHi方法
Person.prototype.nation = "中国"
Person.prototype.sayHi = function(){
   console.log(`你好,我叫${this.name},年龄为${this.age},性别为${this.sex}.`);
}
var p1 = new Person("张三",20,"男");
console.log(p1);//打印的是一个对象
console.log(p1.nation);//中国
p1.sayHi();//你好,我叫张三,今年20.

2.constructor属性 *

constructor属性属于原型对象,任何一个原型对象都有一个constructor属性,该属性指向原型对象所属的构造函数

console.log(Person.prototype.constructor);
   //由上图可知:打印的为Person这个构造函数

3. _ proto _ 属性 **

_ proto _ 属性,该属性属于实例对象,指向实例对象所属的构造函数的原型对象

console.log(p1._proto_);//打印的是nation属性和sayHi方法

4.原型链 ***

JS查找对象属性的顺序:
1.首先在当前实例对象里查找是否对应存在对应属性,若是有,直接获取返回便可
2.若是实例对象里没有该属性,系统不会中止查找,会接着去当前实例实力对象所属的构造函数的原型对象里继续寻找是否存在该属性,若是有,获取返回
3.若是当前构造函数所属的原型对象里也没有该属性,系统还不会中止查找,回去当前实例对象的构造函数的原型对象所属的构造函数的原型对象里继续查找
4.直到找到Object构造函数的原型对象中止查找若是此时尚未找到该属性,属性返回undefined,方法调用也会报错

这种查找对象属性或者方法造成的顺序,咱们称之为"原型链"!!!

原型链的应用 :继承 **

相关文章
相关标签/搜索