JS难点--面向对象(封装)

我觉得js的难点之一就是面向对象编程。

面向对象

它是一种编程思想，它在写法上比面向过程相对来说复杂一些；

以下是我学习中关于面向对象的知识点总结：

 

1、什么是对象　

从广义上说，"一切皆对象"；狭义上说，是一种复合数据类型Object。

  对象可以添加属性（变量）与方法（函数）

2、创建对象的方法

　①：直接字面量  {}

var person={
    name:'jackson',
    age:30,
    sing:function(){
         console.log('beat it');
    }
};
person.height='180CM';
person.interset=function(){
    console.log('dancing');
};
            

 

 ②：使用关键字new    new Object()

var person1=new Object();
person1.name='jack';
person1.age=18;
person1.playgame=function(){
    console.log('王者荣耀');
};

 

3、创建完的对象有两个特点

　　①：添加属性(属性的值为非函数的任意数据类型)

　　　 描述对象的特征

　　②：添加方法(方法的值为函数)

　　　 实现对象的一些功能

 

4、面向对象的写法特点

　　①：把变量写作属性；

　　②：会把功能写成一个函数；

　　③：这个函数是在对象身上的；

　　④：对象身上的功能可以继承。

5、如何封装一个函数

//工厂方式
function createPerson(name,age){
    var obj=new Object;
                
    obj.name=name;
    obj.age=age;
                
    obj.say=function(){
        console.log('我叫'+obj.name);
    }
                
        return obj;
}
            
var p1=createPerson('Jackson',30);
var p2=createPerson('Jack',18);
                        
p1.say();
p2.say();

6、构造函数

创建并初始化对象的函数，并且要用new来调用函数，不用new调用的话与普通的函数就没有区别

 

 

通过构造函数new出来的对象叫实例，创造对象的过程叫实例化

构造函数存在一个问题：性能问题会造成资源浪费

function Person(name,age){
    this.name=name;
    this.age=age;
                
    this.say=function(){
        console.log('my name：'+this.name);
       };   
}
var p1=new Person('Jackson',30);        //一个实例
p1.say();
            
var p2=new Person('jack',18);        //一个实例
p2.say(); 

7、原型(prototype)

　　函数身上的属性，每一个函数身上都有这个属性，它的值是一个对象

　  它身上可以放属性与方法，如果与构造函数相结合的话，通过构造函数创建的对象就会具有它身上的属性与方法

   对象是通过构造函数创建的，那prototype就是这个对象的原型对象

   建议把一些公用的属性或者方法都放到构造函数的原型身上，这样就可以解决构造函数的性能问题。

 

8、__proto__

　　对象身上的属性，每一个对象身上都会有这个属性。它的值也是一个对象，它的值就是它对应的构造函数的prototype的值

　　对象.__proto__===构造函数.prototype

 

　　对象之所以能够继承原型身上的属性与方法，是因为每个对象身上都有一个__proto__，那__proto__的值指向了构造函数的prototype

function Person(name,age){
    this.name=name;
    this.age=age;
}
            
Person.prototype.gender='男';
Person.prototype.say=function(){
    console.log('my name:'+this.name);
};
            
var p1=new Person('Jackson',30);        //一个实例
var p2=new Person('Jack',18);        //一个实例
            
console.log(p1.__proto__===Person.prototype);     //true

9、原型链

　　对象与原型之间的关系（链接）

　　原型链查找规则

　　　　当我们调用一个对象身上的属性或者方法的时候，它就会有一个查找规则

　　　　①：首先会在自身去找，如果有的话就用自己的；

　　　　②：如果没有的话，它就在该对象的__proto__下查找，因为__proto__这个属性是指向对应的构造函数身上的protytpe，把它查找的时候找的就是构造函数的原型

　　　　③：如果原型身上也没有的话，那它会继续往外面找，直到找到最顶层的Object身上的prototype，如果都没有，则返回undefined

 

10、面向对象的写法

function 构造函数(){
    this.属性＝??;
}
构造函数.prototype.方法=function(){}
            
var 实例对象=new 构造函数();
实例对象.方法();

 11、constructor

 概念：每个对象身上都会有这个属性，默认指向该对象对应的构造函数

 　　 这个属性不是放在对象身上，放在对应的原型对象身上

 作用：查看对象的构造函数

 语法：对象.constructor

 返回值：对象的构造函数

 问题：这个属性是可以被修改的，所以最好重新指向一下

 

function Coder(name){
    this.name=name;
}
Coder.prototype={
    constructor:Coder,   //重新指向，防止改变它的构造函数
    age:18,
    gender:'男'
};