JavaScript入门【3】面向对象

1.对象:

1.概述:

   在js中除了5中基本类型之外,剩下得都是对象Object类型(引用类型),他们的顶级父类是Object;

2.形式:

   在js中,对象类型的格式为key-value形式,key表示属性,value表示属性的值

3.创建对象的方式:

方式1:通过new关键字创建(不常用)

    let person = new Object();// 添加属性  与 值person.name="张三";person.age = 22;console.log(person)      

方式2:通过{}类似于JSON字符串的形式创建:

     let person = {name: '张三',age: 20}console.log(person);   

4.对象的相关操作:

1.添加属性:

    let person = new Object();// 添加属性  与 值person.name="张三";person.age = 22;console.log(person)      

let person = {name: '张三',age: 20}console.log(person);// 添加属性person.sex = '男';

2.获取属性值:

对于new方式创建的对象,获取属性值的方式如下:

    let person = new Object();// 添加属性  与 值person.name="张三";person.age = 22;console.log(person.name)       

对于{}方式创建的对象,获取属性值得方式如下(上面得方式也适用):

let person = {name: '张三',age: 20}console.log(person['age']);

3.删除属性:通过delete关键字实现(两种创建方式都适用)

let person = {name: '张三',age: 20,sex:'男'}delete person.sex;console.log(person);

4.遍历对象属性:for-in循环

let person = {name: '张三',age: 20,sex:'男'}for (let personKey in person) {console.log(personKey,person[personKey]);}

2.函数:不依赖于实例对象

1.概述:

是由一连串的子程序（语句的集合）组成的，可以被 外部调用，向函数内部传入参数之后，函数可以返回的一定的值得代码集合;

2.函数对象的创建:

方式1;通过new关键字:(不常用)

let  函数名=new Function("执行的语句");

let funA = new Function("console.log('函数对象执行了')");
//调用函数:
funA();

方式2:声明式创建函数

function 函数名(形参1,形参2.....) {语句}

function sum(num1, num2, num3) {console.log("执行了sum函数:收到了参数：", num1, num2, num3)//可以使用return 返回结果return num1 + num2;}//调用函数let ret=sum(1,2);console.log(ret);

注意事项:

•   调用有参函数时,传入的参数不受函数定义的函数列表影响,可以多传,少穿,或者不传;
  

•   创建函数时,不涉及返回值(类似于Java中的构造方法),但函数体内可以return执行结果;
  

3.函数的类型:

1.常规函数:上述函数即为常规函数

function 函数名(形参1,形参2.....) {语句}   

2.匿名函数:没有函数名,而是由一个变量进行接收

 let 变量名(函数名)=function(形参1,形参2.....) {执行语句}

3.嵌套函数:即函数体内包含一个子函数

 function 父函数名(形参1,形参2.....) {function 子函数名(形参1,形参2.....) {语句}   }   

注意:直接调用父函数时,无法执行子函数

function fu() {function zi() {console.log("我是子函数");}父函数的其他执行语句}   //调用父函数fu();

如果需要执行子函数,则需要在父函数中手动调用子函数

function fu() {function zi() {console.log("我是子函数");}zi();// 父函数的其他执行语句}   //调用父函数fu();

4.立即执行函数:可理解为函数一创建出来就被调用执行

(function (形参1,.....) {执行语句})(实参.........)

(function (msg) {console.log("我是一个匿名函数",msg)})('我是一段消息');

3.方法:需依赖于示例对象

1.方法的定义:

      需要先创建对象,然后依赖对象在创建方法;

 let person = {name:'张三',age:23,//定义方法sayHello:function () {console.log(this.name+",Hello")}}console.log(person)//调用方法person.sayHello();     

2.this关键字:

1.this出现在函数中:被直接调用,则this表示window对象

 <script>function fun() {console.log(this.constructor+ ",Hello")}fun();</script>      

通过输出的构造方法名,可以看出此时的this表示window对象

2.this出现在方法中:this表示当前对象(谁调用,this就指代谁)

  function fun() {console.log(this.name + ",Hello")}let person = {name: '张三',age: 23,sayHello: fun}let person2 = {name: '李四',age: 23,sayHello: fun}person.sayHello(); //对象调用方法person2.sayHello();

通过测试结果可以看出,在方法中的this被那个对象调用,this就指代那个对象

4.创建对象的几种方式:

1.直接创建:

存在问题:

       如果需要创建的对象过多,直接创建无法实现代码的高复用性,代码冗余严重;

2.通过工厂模式,封装创建对象的方法:

实现:

 function createPerson(name, age) {let obj = new Object();obj.name = name;obj.age = age;obj.sayHello = function () {console.log(this.name)}return obj;}let person1 = createPerson('张三', 22); //Object 类型let person2 = createPerson('李四', 22); //Object 类型console.log(person1,person2)

存在问题:

通过下面测试结果可以看出,使用工厂模式创建的对象没有独立的类型,全部都是Object;

 function createPerson(name, age) {let obj = new Object();obj.name = name;obj.age = age;obj.sayHello = function () {console.log(this.name)}return obj;}let person1 = createPerson('张三', 22); //Object 类型let person2 = createPerson('李四', 22); //Object 类型console.log(typeof person1, typeof person2)

3.通过构造函数创建对象:

构造函数是什么:

•    构造函数就是一个普通的函数,创建方式和普通函数没有区别;
  

•    不同的是 构造函数一般首字母大写，调用时不同 需要使用new关键字;
  

构造函数的执行流程:

•  1.调用构造函数，会立刻创建一个新的对象
  

•  2.将新建的对象设置为函数中的this,在构造函数中可以使用this开引用新建的对象
  

•  3.逐行执行函数中的代码
  

•  4.将新建的对象返回
  

实现通过构造函数创建对象:

  function Person(name, age) {this.name = name;this.age = age;this.sayName = function () {console.log(this.name)}}let person1 = new Person('张三', 23);let person2 = new Person('李四', 23);console.log(person1, person2)

说明:

通过此种方式创建的对象,都有独立的类型,不再是object,而是与构造函数有关

  function Person(name, age) {this.name = name;this.age = age;this.sayName = function () {console.log(this.name)}}let person1 = new Person('张三', 23);let person2 = new Person('李四', 23);console.log(person1, person2) function Person2(name, age) {this.name = name;this.age = age;this.sayName = function () {console.log(this.name)}}let person3 = new Person2('李四', 23); //  判断 person3 是 Person2 / Person 创建的console.log(person3 instanceof Person)console.log(person2 instanceof Person)console.log(person3 instanceof Person2)

由于person3是通过Person2构造函数创建的,所以 console.log(person3 instanceof Person)输出为false,console.log(person3 instanceof Person2)输出为true;

5.原型:

1.概述:

•    我们创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，
  

•    原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
  

•    普通函数调用prototype没有任何作用,当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__（隐式原型）来访问该属性。
  

2.案例解析:

  //创建构造函数function Person(name, age) {this.name = name;this.age = age;this.sayName = function () {console.log(this.name)}}//将属性 或者 函数 存在原型中  共享的Person.prototype.xxx = "我是测试数据";Person.prototype.showInfo = function () {console.log(this.name, "我是原型中的方法")} let person1 = new Person('张三', 23);let person2 = new Person('李四', 23);console.log(person1, person2);

    //创建构造函数function Person(name, age) {this.name = name;this.age = age;this.sayName = function () {console.log(this.name)}}//将属性 或者 函数 存在原型中  共享的Person.prototype.xxx = "我是测试数据";Person.prototype.showInfo = function () {console.log(this.name, "我是原型中的方法")} let person1 = new Person('张三', 23);let person2 = new Person('李四', 23);//person1 访问xxx 先从person1对象自身寻找xxx属性//没有的 就去原型中找// 在没有  就通过父类找console.log(person1.xxx, person2.xxx)person2.showInfo();

          ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1731664800063-21502bd1-ec70-43a7-8239-67f169e58805.png)

因为在Person类的原型对象中添加了属性xxx和showinfo方法,而person1和person2作为它的实例对象,在访问时,由于从自身无法获取到,就向上在共享的原型对象中访问到了属性xxx和方法showinfo;

  //创建构造函数function Person(name, age) {this.name = name;this.age = age;this.sayName = function () {console.log(this.name)}}//将属性 或者 函数 存在原型中  共享的Person.prototype.xxx = "我是测试数据";Person.prototype.showInfo = function () {console.log(this.name, "我是原型中的方法")} let person1 = new Person('张三', 23);let person2 = new Person('李四', 23);//使用 in 检查对象中是否 含有某个属性  有  true 没有 falseconsole.log('name' in person1);console.log('xxx' in person1);console.log(person1.hasOwnProperty('name'))//true  xxx不是person1 自身的数据console.log(person1.hasOwnProperty('xxx'))console.log(person1.__proto__.hasOwnProperty('xxx'))

由于xxx属性是原型对象中的属性,而不是person1自身的属性,所以测试结果为false;

6.继承:

1.方式:

• ** * 1.原型链继承**
  

• **     * 2.构造方法继承**
  

• **     * 3.组合继承**
  

• **     * 4.原型式继承**
  

• **     * 5.寄生继承**
  

• **     * 6.寄生组合继承**
  

2.原型链继承:

实现:

 function SupperType() {this.supProp = "我是父类型中的属性"}//给父类的原型添加方法SupperType.prototype.showSupperProp = function () {console.log(this.supProp);}//创建子类原型function SubType() {this.subType = "我是子类的属性"}//继承  让子类的原型属性 指向 父类类型SubType.prototype = new SupperType();//将子类的原型的构造方法属性设置为子类自己SubType.prototype.constructor = SubType;//子类的原型对象添加方法SubType.prototype.showSubProp = function () {console.log(this.subType)}let subType = new SubType();//调用父类的原型中的方法subType.showSupperProp();//调用子类自己的原型中的方法subType.showSubProp();//获取父类中的属性console.log(subType.supProp)console.log(subType)

说明:

 上述代码中是通过将子类的原型对象指向父类对象来实现的,在子类访问父类属性或方法时,先在自身找,如果找不到,再在子类的原型对象中找,要是还找不到,就在父类对象中找,父类对象属性中也没有,就在父类的原型对象中找,就这样以引用链的形式查找,进而实现了继承;

存在问题:

•    1.不能为父类传参;
  

•    2.原型链继承多个实例的引用类型属性,且由于指向是相同的,一个实例修改了原型属性，另一个实例的原型属性也会被影响;
  

3.构造函数继承:

实现:

  //1.定义父类的构造函数function SupperType(name) {this.name = name;this.showSupperName = function (){console.log(this.name,"这是方法")}}SupperType.prototype.xxx= "父类原型属性";//2.创建子类构造函数function SubType(name,age) {//在子类中 调用call 继承父类中的属性与方法SupperType.call(this,name);this.age = age;}SubType.prototype.showInfo = function () {console.log(this.name,this.age)}let subType = new SubType('张三',20);subType.showSupperName();//子类原型中的方法subType.showInfo();//通过子类实例 调用父类原型中的属性console.log(subType.xxx);console.log(subType)

说明:

通过此方式实现继承与原型链的方式不同,此方式更像是把父类的属性和方法复制到子类中,虽然最后看似在调用父类的属性和方法,但其实是调用本类的属性和方法,因此通过此方式并没有建立完全的继承关系,所以subType的父类是Object,而非SupperType,因此子类SubType是无法访问到父类SupperType的原型对象中的属性和方法的;

存在问题:

 通过构造函数实现继承关系,解决了原型链继承的问题.但又出现了下面的新问题:

•   无法访问父类原型对象中的方法或属性;
  

4.组合继承:

实现:

<script>//1.定义父类的构造函数function SupperType(name) {this.name = name;this.showSupperName = function (){console.log(this.name,"这是父类方法")}}SupperType.prototype.xxx= "父类原型属性";//2.创建子类构造函数function SubType(name,age) {//在子类中 调用call 继承父类中的属性与方法SupperType.call(this,name);this.age = age;}SubType.prototype=Object.create(new SupperType());SubType.prototype.constructor=SubType;SubType.prototype.showinfo=function(){console.log(this.name,this.age,"子类方法")}let sub=new SubType("张三",22);sub.showSupperName();sub.showinfo();console.log(sub.xxx);console.log(sub);
</script>   

说明:

此方式结合了引用链继承和构造方法继承的特点,解决了它们自身存在的问题

存在问题:

虽然组合继承解决了引用链继承和构造方法继承所存在的问题,但有出现了新的问题;

• 父类中的实例属性和方法在子类实例中又在子类原型中，内存开销变大;