面向对象

70 阅读2分钟

对象

创建对象

带有可选 属性列表 的花括号{…} 来创建对象

字面量创建

let user = {
name: "John",
age: 30,
"likes birds": true // 多词属性名必须加引号
};

使用const 声明的对象是可以被修改的

const user = {
name: "John"
};
user.name = "Pete"; // (*)
alert(user.name); // Pet

同方括号[]创建并读取

let user = {};
// 设置
user["likes birds"] = true;
// 读取
alert(user["likes birds"]); // true
// 删除
delete user["likes birds"];

工厂函数创建对象

function createobj(name){
    var obj={}
    obj.name=name
    obj.material=[]
    return obj
}
var obj1=createobj("fshf")
console.log(obj1)
​
var obj2=createobj("dfsh")
console.log(obj2)

屏幕截图 2023-11-18 082536.png 自定义构造函数

function Createobj(name){
    //自动对象
    this.name=name
    this.material=[]
    this.cook=function(){
        
    }
    //自动返回
}
var obj1= new Createobj("dfsh")
var obj2= new Createobj("dfsh")
console.log(obj1,obj2)

注意

  1. 首字母大写
  2. 构造函数不写return
  3. 可以当作普通函数调用,但不建议

构造函数中this的指向

屏幕截图 2023-11-18 084032.png

this指向实例化对象即 new CreateObj("")

面向对象的原型

原来的占用空间过多

屏幕截图 2023-11-18 091600.png

创建对象过程中浪费内存的现象,我们需要运用到对象的原型[protottype]

屏幕截图 2023-11-18 092929.png

共享内存

proto_ 和 [[Prototype]] 的基本相同

proto_===构造函数.prototupe

let animal = {
eats: true
};
let rabbit = {
jumps: true
};
rabbit.__proto__ = animal; // (*)
// 现在这两个属性我们都能在 rabbit 中找到:
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true

这里的 (*) 行将 animal 设置为 rabbit 的原型。 当 alert 试图读取 rabbit.eats (**) 时,因为它不存在于 rabbit 中,所以 JavaScript 会顺着 [[Prototype]] 引用,在 animal 中查找(自下而上):

原型链

let animal = {
eats: true,
walk() {
alert("Animal walk");
}
};
let rabbit = {
jumps: true,
__proto__: animal
};
let longEar = {
earLength: 10,
__proto__: rabbit
};
// walk 是通过原型链获得的
longEar.walk(); // Animal walk
alert(longEar.jumps); // true(从 rabbit)

屏幕截图 2023-11-18 095140.png

注意:不能形成闭环

继承

构造函数的继承

function student(name.age.classroom){
    person.call(this.name,age)
    this.classroom=classroom
}

只能继承属性无法继承原型

1.call()经常做一些继承,使子构造函数继承父构造函数

2.apply() 经常跟数组有关系,比如借助于数学对象实现数组最大最小值。

3.bind() 不调用函数,但是还想改变this指向,比如改变定时器内部的this指向。

屏幕截图 2023-11-18 144539.png

屏幕截图 2023-11-18 145343.png 上面的代码表示的是,通过call方法,将父构造函数的this强行改变为成Student子构造函数中的this,将this挂载上grade属性,同时又挂载上name属性及grade属性。这样就将父构造函数中的属性继承过来了,但是并没有继承父构造函数中的方法。

原型继承

继承原型上的方法

Student.prototype=new person()

组合继承

构造函数继承+原型继承

function Person(name.age){
    this.name=name
    this.age=age
}
Person.prototype.say=function(){
    
}

属性存在性

“in” 操作符

let user = {};
alert( user.noSuchProperty === undefined );
​
let user = { name: "John", age: 30 };
alert( "age" in user ); // true,user.age 存在
alert( "blabla" in user ); // false,user.blabla 不存在。