JavaScript面向对象-CSDN博客

本文链接：https://blog.csdn.net/qq_45129779/article/details/128115407

1、JavaScript对象

生活中的对象、属性和方法[函数]
汽车也是一个对象
汽车有诸如车重和颜色等属性
也有诸如启动和停止的方法[函数]

对象

属性

方法

car.name = “porsche”

car.model= 911

car.length=“4499mm”

car.color = “white ”

car.start()

car.drive()

car.brake()

car.stop();

1.2、JavaScript对象基本操作

直接在外部声明的变量 - 它不是一个整体 -- 要去描述一个整体则需要放进一个容器

// var 对象名 = new Object(); 
// 1、创建对象
var obj = new Object();
// 1.1、创建对象 - 一步声明并赋值
var obj2 = {
  name: "小陈",
  sex: "女",
  age: 20,
  sayName: function(){
    console.log(name);
  }
};
// 对象名.属性 = 属性值;
// 对象名.方法名 = function(){}
// 2、使用对象进行赋值
obj.name = "小李";
obj.sex = "女";
obj.age = 20;
obj.sayName = function(){
 console.log(obj.name); 
}
// 使用对象名.属性/方法进行调用
// 3、打印显示
obj.sayName();
console.log(obj.sex);

1.3、使用工厂方式创建对象

如果需要创建多个对象时，按以前的方式需要将多个相同的属性/方法、反复的重新写多次
代码冗余
不利于代码维护
操作繁琐

完善以上的情况，需使用工厂方式来创建对象

//使用工厂方式创建对象
/*
 * 按以前的需要创建多个对象如果有相同的属性时,需要反复的重新写多次
 * 会导致成代码冗余现象,不易于维护
 * 解决以上问题,可以将这些重复的属性及方法放置在公共的区域进行管理
 *
 * 使用工厂方式创建对象，导致所有的对象都是Object这时还无法分辨对象的分类
 * 需要使用构造函数的方式解决该问题
 */
//创建一个公共的函数 -- 工厂函数[方法]
//当前这个函数需要带入一些参数
function createPerson(name ,sex ,age){
    var obj = new Object();
    obj.name = name;
    obj.sex = sex;
    obj.age = age;
    obj.sayPerson = function (){
        console.log(obj.name + "---" + obj.sex + "---" + obj.age);
    }
    //将接收到的数据进行返回
    return obj;
}
//使用工厂方式创建对象
var per = createPerson("李四","女",20);
per.sayPerson();
console.log(per);

1.4、JavaScript构造函数

/*
 * this表示当前对象
 * 解析器在调用函数的时候会向函数内部隐式传递一个参数
 *      这隐式参数就是this
 *  根据函数调用的方式不同，会指向不同的对象
 * 1、正常以函数进行调用 this指向的对象永远都是Window
 * 2、以方法的形式调用时 this就是调用方法的那个对象
 */
function fun(){
    //正常以函数进行调用 this指向的对象永远都是Window
    console.log(this);
}
//正常以函数进行调用
fun();

//创建对象
var obj = {
    name : "张三",
    //将外部的函数赋予给sayName当作内部函数[方法]
    sayName : fun
};
//以对象的形式调用
obj.sayName();

以构造函数的形式完善工厂方式创建对象

以工厂方式创建对象所有的对象都是Object
导致无法辨识对象的分类
需要以构造函数的方式更进

//JS构造函数
/*
 * 构造函数就是一个普通的函数，创建方式没有什么不同
 * 不同就是构造函数首字母大写
 *
 * 构造函数和普通函数区别时调用方式不同
 * 普通函数是直接调用，构造函数是new 关键字调用
 *
 * 构造函数执行流程：
 * 1、创建一个对象
 * 2、将新建的对象设置为函数的this
 * 3、逐行执行构造函数代码
 * 4、将新建对象作为返回值返回
 *
 * 还有一种问题就是每次创建新的对象的时候都会重新的将属性和方法重新创建一个
 * 这样问题就是造成了浪费 [sayName] 是唯一的，创建一次就够了
 * 执行10000次就得创建10000次
 *
 * 则方可将方法定义在全局作用域里面 - 再以值的形式赋值过去即可
 */
//创建一个构造函数
function Person(name,sex,age){
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.sayName = infoName;
}
//定义在全局中 - 在外局中只会执行一次
//外部声明-如果是为对象声明则还是会存在一种问题，就是占用了这个声明的权限会覆盖外部的
//这时可以直接指向到对象中 -- 使用原型的方式解决该问题 - 在demo5讲解
// Person.prototype.sayName = function (){
//     console.log(this.name)
// }
function infoName(){
    console.log(this.name)
}
var per = new Person("王五","男",20);
var per2 = new Person("赵六","男",28);
per.sayName();
per2.sayName();

1.5、JavaScript原型对象

原型prototype

所创建的每一个函数，解析器都会像函数中添加一个属性prototype，这个属性对应着一个对象，也就是原型对象

如果以普通的函数进行调用则prototype没有任何作用

以构造函数形式调用，所创建的对象都会有一个隐含的属性

指向该构造函数的原型对象，可以通过__proto__来访问

作用：

原型对象是一个公共的区域
可以将多个对象共同的属性或方法存入原型中
多个对象可以同时进行访问

//原型对象prototype
/*
 * 所创建的每一个函数，解析器都会向函数中添加一个属性prototype
 *  这个属性对应着一个对象，也就是原型对象
 * 以构造函数形式创建对象会隐含一个属性 __proto__ 指向该构造函数的原型对象，
 * 作用：
 *  原型对象是一个公共区域
 *  可以将多个对象共同的属性和方法存入原型中
 *  需要时，多个对象都可进行引用
 */
function MyClass(){

}
//普通函数使用 --
console.log(MyClass.prototype);

MyClass.prototype.sex = "原型对象的name属性";

//以构造函数创建一个对象
var mc1 = new MyClass();
//创建对象指向原型访问使用 __proto__ ---- 指向的原型对象都是同一个
console.log(mc1.__proto__ == MyClass.prototype)

var mc2 = new MyClass();
//如果当前自己对象中有这个属性则使用自己的，如果没有那么就在原型对象中查找是否存在该属性，有则使用，没有就没有
mc2.name = "mc2对象的name属性";
console.log(mc2.name);

//使用in检查对象，是否存在对应的属性 - 自己的没有会到原型对象里面查找
console.log("sex" in mc2);
//检查当前对象是否存在属性 -- 只检查当前自己的
console.log(mc2.hasOwnProperty("sex"))