JS面向对象的理解和运用

阿波次嘚

已于 2022-03-30 16:58:26 修改

阅读量1.1k

点赞数 1

分类专栏：前端笔记文章标签：开发语言 javascript 学习

于 2022-03-30 12:08:13 首次发布

本文链接：https://blog.csdn.net/weixin_45062076/article/details/123749941

版权

前端笔记专栏收录该内容

35 篇文章 2 订阅

订阅专栏

~~我的理解：

面向对象是从面向过程思想的基础上延伸出来的新思想，这一思想的出现说明人们对计算机的认知又上升了一个层次，面向对象思想的目的是：让计算机存储人类的行为以及该行为所需要的数据，当人类需要做这件事会用到这个行为则会以计算机理解的方式去调用这个行为，而且这个行为具有可复制性并且这个行为会不断的更新和迭代来满足当下的行为需求（所以我的理解是真正的让计算机有生命------是不断地对计算机软硬件的更新和迭代，当你不再维护你写的类，那么你写的类的生命就结束了）。

面向过程我可以用一句话来概括：“牵一发而动全身”。只要涉及到改业务修改页面的个数实际上不能确定（几十，甚至上百 ) ，枯燥而乏味。
在这里插入图片描述

~~我学习的专业知识：

面向对象特性

1.封装：将方法、属性等内容集中放入到指定的位置（一对大括号里块级作用域或函数作用域）。
2.继承：子类可以继承（访问、调用）父类的属性和方法，如果没有父类则默认继承Object类。
(1)继承方式：
a.原型链继承: 一个引用类型继承另一个引用类型缺点是不能传参。
b.构造函数继承: 也叫借用构造函数在子类中让this指向父类（另一个类）进而调用其属性和方法，缺点：父类的原型方法不会被子类继承。
c.组合继承: 构造继承和原型链继承的组合扬长避短。
3.多态（多种状态）：父类中定义的方法子类中仍然可以定义（只是定义的内容不同，方法名是相同的）。

语法结构：

//ES5 -- ~~方法套方法
//（1）封装
function Person(){
	this.p1 = 1;
	this.fp1 = function(){
		return this.p1;
	}
}
function Student(){
	this.s1 = 1;
	this.fs1 = function(){
		return this.s1;
	}
}
Student.prototype.adds1 = function(){
    return '原型链上添加方法';
}
var stu = new Student();
console.log(stu.s1);  //1
console.log(stu.fs1());//1
stu.adds1();// '原型链添加方法'
//（2）继承  的写法
//a.****************************构造函数继承*************************
function Person(){
	this.p1 = 1;
	this.fp1 = function(){
		return this.p1;
	}
}
function Student(){
	this.s1 = 1;
	this.fs1 = function(){
		return this.s1;
	}
    Person.call(this);
    this.fs2 = function(){
        return this.p1;
    }
}
var stu  = new Student();
stu.fs2();//1
//b.*******************************原型链继承**************************
function Person(){
	this.p1 = 1;
	this.fp1 = function(){
		return this.p1;
	}
}
function Student(){
	this.s1 = 1;
	this.fs1 = function(){
		return this.s1;
	}
}
Student.prototype = new Person();
Student.prototype.p1 = 2;
var stu  = new Student();
console.log(stu.p1);//2
//c.*****************************组合继承******************************
function Person(name){
	this.p1 = name;
	this.fp1 = function(){
		return this.p1;
	}
}
Person.prototype.getp1 = function(){return this.p1};
function Student(name){
	this.s1 = 1;
	this.fs1 = function(){
		return this.s1;
	}
    Person.call(this,name);
}
Student.prototype = new Person();
//（3）多态

//对象字面量
var obj = {
  key_1: "value_1",
  arr: [1, 2, 3],
  fun: fun,
};
function fun() {
  return "你好";
}
console.log("obj.key_1 :>> ", obj.key_1); //value_1
console.log("obj.arr :>> ", obj.arr.join("-")); //1-2-3
console.log("obj.fun :>> ", obj.fun());//你好
//Object
var obj = new Object();
console.log('obj :>> ', obj);
//ES6封装一个类 declared
class Person{ //定义一个类
    constructor(name='ppp'){
      this.name= name;
    }
} 
//ES6类的继承
class Student  extends Person{
	constructor(name='sss'){
	  super(name);//如果出现extends继承关键字 则super放在构造函数第一行
      this.name= name;
    }
    //console.log(实例对象名.attr);//mkttt
    get attr(){ // 属性  
      return 'mk' + this.name;
    }
    //实例对象名.attr = 'ssssss';
    set attr(value){
      this.name = value;
    }
    // 静态方法:通过类名调用 Student.say('静态方法');
    static say(name){
        console.log(name);
    }
}
Student.staAttr= 't'; // 定义静态属性
let stu = new Student('ttt');