斑码教育web前端课堂笔记-第49天-面向对象第二天

面向对象第二天

一、复习

原型

new 构造函数

• 面向对象----对象
• 对象共用方法
  • 每个对象拥有一个方法
  • 将方法放入全局
  • 方法的增多，全局方法多
  • 将全局的方法放入到对象中
  • 将对象放入到构造函数的属性中
• 原型： 构造函数的一个prototype属性指向了一个对象，这个对象的方法和属性可以被所有构造函数产生的实例所公用

new的过程：

• 申请内存空间
• 改变this指向
• 为this赋值
• 返回this指向的对象

二、气球打字游戏

• 分数
• 关卡
• 结束

贪吃蛇、打飞机、植物大战僵尸

三、原型

3.1 原型、实例、构造函数三者关系

3.2 原型链

一个构造函数可以产生实例，实例可以使用原型对象中的方法和属性，在js中所有的对象都可以通过__proto__来找到自己的原型对象，原型对象也是一个对象，这个对象也有自己的原型对象，此时就形成了一种链式结构，将这种原型对象形成的链式结构，称之为原型链。

对象可以使用原型中的属性和方法，所以在使用对象的属性和方法的时候，存在一个链式的查找规则，如果找到则使用，如果找不到则为undefined。

3.3 关键字

in: 一个属性或方法是否可以通过一个对象访问 值为布尔类型

hasOwnProperty:检测一个属性和方法是否是该对象本身拥有的

instanceOf: 检测一个对象是否是一个函数的实例（原型链）

instanceof判断依据：

1、所有的函数都是Function的实例

2、所有的对象都是Object的实例

3、函数也是对象

console.log(Person instanceof Function); // true
console.log(Function instanceof Function); // true
console.log(Object instanceof Function); // true
console.log(Array instanceof Function); // true
console.log(xiaoming instanceof Function); // false
console.log('------------------------');

console.log(xiaoming instanceof Object);  // true
console.log(Person instanceof Object); // true
console.log(Object instanceof Object); // true
console.log(Function instanceof Object); // true
console.log(Array instanceof Object); // true

如何判断A对象是B函数产生的实例？ A = new B()

• A.__proto__ == B.prototype;

• A.__proto__.constructor == B;

3.4 返回值对new的影响

基本数据类型没有影响，引用类型可以阻止返回值，返回值为引用类型。

3.5 安全类

使用new和直接调用，都会产生new所得到的对象。

demo:

<script>
    // var arr = new Array(5);
    // console.log(arr);
    // var brr = Array(5);
    // console.log(brr);
    /* 
        Array本身是一个系统内置的构造函数，你new不new都产生了数组对象，这样的构造函数为安全类
    */
    function Person(name, sex, age) {
     
        // 判断，你new了不管你，你没new我帮你new
        if (this == window ) {
     
            return new Person(name, sex, age);
        }
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    Person.prototype.show = function() {
     
        console.log('111111111111111');
    }

    var xiaoming = new Person('小明', '男', 19);
    var lili = Person('莉莉', '女', 19);
    console.log(xiaoming);
    console.log(lili);
</script>

res:

四、继承

想要拥有别人的属性和方法，通过继承，子类可以使用父类的属性和方法，在js中继承主要是想继承方法。

给子类添加方法，不影响父类。

4.1 链式继承

缺点：

• 缺失了constructor属性， 认为指定
• 重复的给属性赋值
• 原型对象中多了无用属性

4.2 构造函数继承

构造函数继承，不是真的继承，他只是解决了重复赋值的问题。

4.3 组合继承

链式继承 + 构造函数继承

缺点：

• 原型中多了无用属性

4.4 寄生式继承

解决的问题：去除原型中无用的属性

<script>
// 声明一个人类
function Person(name, sex, age) {
     
    this.name = name;
    this.sex = sex;
    this.age = age;
}

// 方法写入到原型中
Person.prototype.say = function() {
     
    console.log('我叫' + this.name + ', 我今年' + this.age + '岁，我是一个' + this.sex + '生');
}

// 声明一个学生
function Student(name, sex, age, grade) {
     
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.grade = grade;
}

// 声明第三方类,空属性
function Para(son, parent) {
     
    // 声明一个空函数
    function F() {
     

    }
    // 将F的原型指向parent原型
    F.prototype = parent.prototype;
    // 将子类的原型指向F的实例
    son.prototype = new F();
    // 重新指定构造函数
    son.prototype.constructor = son;
}

// 调用
Para(Student, Person); 
// 添加方法
Student.prototype.xxoo = function() {
     
    console.log(2222);
}   

var student1 = new Student('小明', '男', 7, '一年级');
var student2 = new Student('莉莉', '女', 9, '三年级');
student1.say();
student2.say();
// 查看对象
console.log(student1);
</script>

4.5 寄生组合式继承（常用）

demo:

<script>
// 声明一个人类
function Person(name, sex, age) {
     
    this.name = name;
    this.sex = sex;
    this.age = age;
}

// 方法写入到原型中
Person.prototype.say = function() {
     
    console.log('我叫' + this.name + ', 我今年' + this.age + '岁，我是一个' + this.sex + '生');
}

// 声明一个学生
function Student(name, sex, age, grade) {
     
    // 构造函数继承
    Person.apply(this, arguments);
    this.grade = grade;
}

// 声明第三方类,空属性
function Para(son, parent) {
     
    // 声明一个空函数
    function F() {
     

    }
    // 将F的原型指向parent原型
    F.prototype = parent.prototype;
    // 将子类的原型指向F的实例
    son.prototype = new F();
    // 重新指定构造函数
    son.prototype.constructor = son;
}

// 调用
Para(Student, Person); 
// 添加方法
Student.prototype.xxoo = function() {
     
    console.log(2222);
}   

var student1 = new Student('小明', '男', 7, '一年级');
var student2 = new Student('莉莉', '女', 9, '三年级');
student1.say();
student2.say();
// 查看对象
console.log(student1);
</script>

五、作业

姓名	总结知识点范围
王心	js事件
李心迪	标签
白皓臣	css选择器
文安生	css属性和属性值
王铭淇	js数组、字符串 方法
闫灵涛	flex布局、节点操作、js获取对象、js中常用属性
尹晓东	编辑器快捷键
张瑞	200个英文单词，中汉 经常使用的
吴航	300个英文单词， 中汉 经常使用的，不能跟张瑞重复
洪明阳	html常用属性 不用低于100个
马壮	总结所有的兼容处理
景霖	以上同学沟通汇总监督，补充

ctrl + /