JS面向对象——面向对象知识
2019-04-20 本文已影响0人
benbensheng
1. 程序设计的方法
常见的设计方法有面向流程与面向对象。
1.1 面向过程
以程序的过程为中心，采用自定而下逐步细化的方法来实现。常见的面向过程语言有 C
image.png
1.2 面向对象
将对象作为程序的基本单元，将程序分解为数据和操作的集合
image.png
1.3 面向对象编程的概念
一个对象通常可以由3个部分组成，分别是对象名（标识）、属性（静态特征）和操作（方法，动态特征）
-
类（Class）
类是具有相同属性和相同操作的对象的集合。
每个对象都是类的一个实例。
类通常由3部分组成，分别是类名、属性和操作（方法）。
类一般都有实例，没有实例的类叫抽象类。抽象类相当于一个模版，由具体的类去继承和实现，抽象类的子类必须覆盖抽象类的所有方法之后才能被实例化，否则还是抽象类。 -
对象（Object）
-
类与对象的区别
类是抽象的概念，仅仅代表事物的模板，比如说“女朋友”、“男朋友”。
对象是一个能够“看得到，摸得着的”具体的实体，比如石榴姐。
类是一个对象集合，是根据问题域抽象得来的，对象就是类的实列化，是一个有血有肉的个体。例如，鱼类是抽象的，金鱼就是这个类的一个对象。
class dog //狗的类 有属性和方法
{
public string name;
public void bark()
{
Console.WriteLine("汪汪，我的名字叫"+name);
}
}
dog a = new dog(); 类实例化---狗a（对象）
a.name = "旺财";
a.bark();
-
属性（Property）
-
方法（Method）
1.4 面向对象的三个基本特征是：封装、继承、多态
image.png
- 封装
- 继承
- 多态
在js中不能直接实现函数的重载,利用arguments实现重载
function test1()
{
var text="";
if(arguments.length==1)
{
//调用一个参数的方法
}
else if(arguments.length==2)
{
//调用两个参数的方法
}
else { //其他的方法
}
}
2.JavaScript 面向对象
2.1 构造器（constructor）
对象的构造器，也可称之为构造类型
- 系统定义好的
var o = new Object();
var a = new Array();
var d = new Date();
| |
object constructor
// 使用直接量创建
var o = {name: 'Xinyang'};
var a = [1, 2, 3];
- 自定义构造器
// constructor
function Person(name, age, birthdate) {
this.name = name;
this.age = age;
this.birthdate = birthdate;
this.changeName = function(newAge) {
this.age = newAge;
}
}
// 创建对象
var X = new Person('Stupid', 13, new Date(2015, 01, 01));
var Q = new Person('Q', 12, new Date(2015, 01, 01));
X.changeName('X');
- 创建构造器的方法（3 种）
//1)构造函数模式。
function Person(name, job) {
this.name = name
this.job = job
this.sayName = function() {
console.log(this.name)
}
}
var person1 = new Person('Jiang', 'student')
//2）工厂模式
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}
return o;
}
var person1 = createPerson("zhangsan",29,"soft engineer");
var person2 = createPerson("lisi",30,"hardware engineer");
//3）原型模式
function Person(){}
Person.prototype.name="小米";
Person.prototype.showName=function(){
alert(this.name);
}
var person1=new Person();
person1.showName();
缺点：属性共享
//4）混合模型
构造函数模式定义实例属性，而原型模式用于定义方法和共享的属性
function CreatePerson(name){
this.name=name;
}
CreatePerson.prototype.showName=function(){
alert(this.name);
}
var p1=new CreatePerson('小白');
p1.showName();
var p2=new CreatePerson('小绿');
p2.showName();
2.2原型继承
function Super(){
this.name="小明";
}
Super.prototype.sayName = function(){
console.log(this.name)
};
function Sub(){}
Sub.prototype = new Super();
var instance = new Sub();
instance.sayName();//小明
原型链继承的问题
当超类中包含引用类型属性值时，其中一个子类的多个实例中，只要其中一个实例引用属性只发生修改一个修改，其他实例的引用类型属性值也会立即发生改变,值类型修改不影响
function Super(name){
this.name=name;
this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
console.log(this.name)
};
function Sub(){}
Sub.prototype = new Super("小明");
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
instance1.name="benben"
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强", "张三"]
console.log(instance2.name);//小明
无法实现多继承，即只能继承Super不能继承其他
2.3 构造函数继承
解决子类实例共享父类引用属性的问题
可以实现多继承（call多个父类对象）
function Super(){
this.name="小明";
this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
alert(this.name)
};
function Sub(){
Super.call(this);
}
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]
存在的问题
只能继承父类的实例属性和方法，不能继承原型属性/方法
function Super(){
this.name="小明";
this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
alert(this.name)
};
function Sub(){
Super.call(this);
}
var instance1 = new Sub();
instance1.sayName () //instance1.sayName is not a function
function Super(){
this.name="小明";
this.friends = ['小红','小强'];
this.TellName = function(){
alert(this.name)
};
}
Super.prototype.sayName = function(){
alert(this.name)
};
function Sub(){
Super.call(this);
}
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]
instance1.sayName () //instance1.sayName is not a function
instance1.TellName();
2.4组合式继承（原型继承+借用构造函数继承）常用方法
多了一个 Sub.prototype = new Super();
可以继承实例属性/方法，也可以继承原型属性/方法
不存在引用属性共享问题
function Super(){
this.name="小明";
this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
alert(this.name)
};
function Sub(){
Super.call(this);
}
Sub.prototype = new Super();
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]
instance1.sayName();//小明
instance2.sayName();//小明
存在的问题
2.5寄生式继承
function createAnother(original){
var clone = Object(original);//创建一个新对象，original的副本
clone.sayName = function(){ //对象的增强，添加额外的方法
alert('hi');
}
return clone;
}
var person = {
name:'小明',
friends:['小红','小强']
}
var person1 = createAnother(person);
var person2 = createAnother(person);
person1.friends.push('张三');
console.log(person.friends);//["小红", "小强", "张三"]
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强", "张三"]
存在的问题
寄生组合式继承
function inheritPrototype(sub,superr){
var prototype = Object.create(superr.prototype);//ES5中创建对象副本的方法
prototype.constructor = superr; //弥补重写原型失去的默认constructor属性
sub.prototype = prototype;
}
function Super(name){
this.name = name;
this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
alert(this.name);
}
function Sub(name){
Super.call(this,name);
}
inheritPrototype(Sub,Super);
var person1 = new Sub('小明');
var person2 = new Sub('小华');
person1.friends.push('张三');
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强"]
console.log(person1.sayName());//小明
console.log(person2.sayName());//小华
2.7Class继承
- class构造对象
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello, ' + this.name + '!');
}
}
var xiaoming = new Student('小明');
xiaoming.hello();
- class继承
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
https://blog.csdn.net/weixin_40184249/article/details/80709949
