菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
175
0

面向对象

原创
05/13 14:22
阅读数 33895

面向对象

编程思想:

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

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

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

(2)通过类(class),去创建对应的对象(object)

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

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

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

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

1.名字首字母大写

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

JS创建对象的两种方式:

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

如何操作一个函数:

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

对象.属性名

例子:创建一个学生对象,属性包括:姓名,年龄,性别,学校,专业;方法包括:上课,考试,做作业,函数里只需要输出一行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,方法调用也会报错

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

原型链的应用 :继承 **

 

发表评论

0/200
175 点赞
0 评论
收藏