JS-OOP

面向对象编程    oop

面向过程    pop

面向对象   

    以功能对象划分问题

                   优点                                缺点

面向对象    灵活,复用,维护[大型项目]                  性能低

  VS

面向过程    效率{性能}高[偏底层、硬件]                没有面向对象灵活、复用、维护

类和对象

    泛指————类     

    具体————对象

面向对象思维特点:

    1:抽取对象公用的属性和行为组织成一个类

    2:对类进行实例化,得到一个具体的实例\对象

对象

    属性:事物的特征    名词

    方法:事物的行为    动词

ES5 构造函数和原型

[1]对象直接量

        var cat = {

            name:‘zhangsan‘,

            age:18

        }

[2]new Object()     构造函数

        var obj = new Object();

[3]自定义构造函数

        function Cat(){

            this.color = ‘black‘;

        }

    Con:

        构造函数,本质上是一种特殊函数,主要用来创建对象,总是 new 一起使用。

        构造函数:建议,首字母大写。

        new Array();

        -不需要return this;

        -return 10; 语句无效

        -return 引用类型;会生效

            ex: return {}; ---会返回空对象

    ex:

        function Student(name,age){

            //name、age:成员属性\组成部分

            this.name = name;

            this.age = age;

            this.study = function(){

                console.log(‘day day up‘);

            }

        }

        var zs = new Student(‘zs‘,18);

            console.log(zs.name);

            zs.study();

        var ls = new Student(‘ls‘,18);

        构造函数内部:通过this添加的成员,实例成员

            -访问实例成员,对象.成员

        Student.nation = ‘China‘; ---静态成员

            -不支持对象访问

            -只能通过 构造函数去访问

            -同理,实例成员,不支持构造函数访问

            【公共属性】

原型定义的函数:支持共享[所有实例都可以访问]

总结:

    this.对象,实例成员,特点:私有

    xx.prototype.XX 原型,特点:所有实例对象共享

    每个对象都会有一个属性 __proto__(非标准属性),指向构造函数的prototype原型。

    构造函数的原型prototype === 生成对象的.__proto__

    原型链查找机制

继承:

    1:call()

[1]实现函数调用

            function fun(){}

            fun();     ===》  window.fun()  ===》 默认是 window对象

        [2] fun.call(obj)

            改变默认this对象;

            注意:始终放在第一位。

            ex: fun.call(obj,a,b);

        [3] 应用

            function Fa(name, age) {

                console.log(this);

                this.name = name;

                this.age = age;

            }

            function Son(name, age) {

                Fa.call(this, name, age);

            }

Constructor:

    原型对象————Student.prototype

        -Student.prototype.constructor  ====>  定义的构造函数

        -构造函数this指的是实例对象                                

        -原型对象中this指的也是实例对象                            

        扩展数组方法:求和------?不支持这种写法

        -Array.prototype = {

            constructor:Array,

            add:function(){

                var sum = 0;

                for(var i=0;i<this.length;i++>){

                    sum+=i;

                }

                return sum;

            }

        }

        -Array.prototype.add = function(){

            var sum = 0;

            for(var i=0;i<this.length;i++>){

                sum+=i;

            }

            return sum;

        }

原型链:

    对象.__proto__()

    构造函数.prototype()

继承:

    对象原型————实例化对象的 zs.__proto__

    关键步骤:

        Son.prototype = new Fa(‘mcaro‘, 25);

        Son.prototype.constructor = Son;

ES6的类{只是语法糖改变,本质不变}

    class Student{

        constructor(name,age){

            this.name = name;

            this.age = age;

        }

        //属于原型层面定义

        study(){

        }

    }   

    var zs = new Student(‘macro‘,24);   

ES6继承:

    在继承中,实例化子类,

ES6类的使用细节:

    【1】class定义类,没有变量提升————必须先定义,后实例化

    【2】构造函数中的 this ————  实例对象 {同理,方法中的this亦然}


构造函数原型应用

Array.prototype = {

constructor: Array,

add: function() {

var sum = 0;

for (var i = 0; i < this.length; i++) {

sum += this[i];

                }

return sum;

            },

sub: function() {

            },

        };

Array.prototype.getSum = function() {

var sum = 0;

for (var i = 0; i < this.length; i++) {

sum += this[i];

            }

return sum;

        }

var arr = [1, 2];

console.log(arr.getSum());


class Fa {

constructor(name, age) {

this.name = name;

this.age = age

            }

FamRule() {

console.log("正向正念");

            }

        }

class Son extends Fa {

//重写;默认自动调用

constructor(name, age) {

super();

this.name = name;

this.age = age

            }

        }

var son = new Son(‘macro‘, 25);

son.FamRule();

console.log(son.name, son.age);


function Fa(name, age) {

this.name = name;

this.age = age;

this.compairor = function() {

console.log("事业家庭平衡");

            };

        };

function Son(name, age) {

Fa.call(this, name, age);

        }

Fa.prototype = {

constructor: Fa,

family: function() {

console.log(‘家风正清‘);

            },

educate: function() {

console.log(‘传承,发扬‘);

            }

        };

//而且,这里不是新建,而是引用!

Son.prototype = Fa.prototype;

Son.prototype.innovate = function() {

console.log(‘创新,创造‘);

        };

Son.prototype.empair = function() {

console.log(‘全球化,保持清醒,悲观战略,乐观执行‘);

        };

//构造函数——注意区别

function Fa(name, age) {

this.name = name;

this.age = age;

this.compairor = function() {

console.log("事业家庭平衡");

            };

        };

function Son(name, age) {

Fa.call(this, name, age);

        }

Fa.prototype = {

constructor: Fa,

family: function() {

console.log(‘家风正清‘);

            },

educate: function() {

console.log(‘传承,发扬‘);

            }

        };

//而且,这里不是新建,而是引用!

//Son.prototype = Fa.prototype;

//充分利用原型链实现继承关系

Son.prototype = new Fa(‘mcaro‘, 25);

Son.prototype.constructor = Son;

Son.prototype.innovate = function() {

console.log(‘创新,创造‘);

        };

Son.prototype.empair = function() {

console.log(‘全球化,保持清醒,悲观战略,乐观执行‘);

        };

JS-OOP

上一篇:如何制作图标字体(如何将svg转换为css可用的图标字体)


下一篇:nodejs: express basic