• 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('全球化,保持清醒,悲观战略,乐观执行');

            };

  • 相关阅读:
    Jquery开发技巧汇总
    (转)
    C#中的委托和时间
    asp.net中like 使用参数化(转)
    省市选择
    安卓对话框
    z转自 西西吹雪
    winform控件验证技术(转)
    C#获取网卡Mac地址 .(转)
    关于GDI+错误的修正
  • 原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13054625.html
Copyright © 2020-2023  润新知