JavaScript继承模式、命名空间

继承模式

继承的发展史

        1、传统形式   (原型链)

                      点击了解原型链

                 过多的继承了没用的属性

                

        2、借用构造函数 (call  、 apply)

                     点击了解call和apply

                不能继承借用构造函数的原型

                每次构造函数否要多走一个函数

        3、共享原型

                缺点:不能随便改动自己的原型

eg:
                Father.prototype.lastName = "Deng";
                function Father(){

                }
                function Son(){
                }
                Son.prototype = Father.prototype;  
                var son  = new Son();
                var father = new Father();

子级元素可以继承父级的原型,但是呢,子级不能自己修改自己的原型,怎么样才能让自级可以任意操作自己的原型呢,为了解决这一问题,那就出现了圣杯模式。

        4、圣杯模式

            在学习圣杯模式之前,我们先说一下函数和功能的关系,以及继承

get技能:  抽象出一个功能,封装出函数。函数就代表功能,函数代表功能的一个赋用。哪块能赋用,哪块能定义化,靠参数来实现的。

继承: inherit   / extends

凡是文字类属性都具有继承的特性【ps:如果没有给文字类子级加上属性(eg: font-size),那么他就会默认继承父级的属性】

我们主要是学习inherit的用法  : 子级没有,继承父级的。

语法:function inherit(Target, Origin){
                Target.prototype = Origin.prototype;
            }

下面正式介绍圣杯模式:

语法:

 function inherit(Target, Origin){
                function F(){};
                F.prototype = Origin.prototype;
                Target.proyotype = new F();
                Target.prototype.constuctor = Target;       //若没有这句话,Target指向的构造函数为Orange的构造函数,但如果让他指向target的构造函数需要加上这句话
                Target.prototype.uber = Origin.prototype;  //真正继承自谁
            }

这是我们最通俗的写法,还有一种逼格很高的写法,我称优化的圣杯模式。

优化的圣杯模式,用到了两个技术:1、立即执行函数(执行过后立即销毁);2、闭包(实现封装,变量、属性私有化);点击查看立即执行函数和闭包

语法:

 var inherit = (function(){
            var F = function(){};   //对象F变成私有化变量
            return function(Target, Origin){
            F.prototype = Origin.prototype;
            Target.prototype = new F();
            Target.prototype.constuctor = Target;
            Target.prototype.uber = Origin.prototype;
                }
            }())

举个例子:

Father.prototype = {
    name : 'xiaoming',
    age : 18,
}
function Father(){};
function Son(){};
var inherit = (function(){
    var F = function(){};
    return function (Son, Father){
        F.prototype = Father.prototype;
        Son.prototype = new F();
        Son.prototype.constructor = Son;
        Son.prototype.uber = Father;
    }
}()) 
inherit(Son, Father);
var son = new Son();
var father = new Father(); 

打印结果


命名空间

作用: 管理变量,防止污染区安居,适用于模块开发

主要讲init : 入口、初始化

命名空间用到的技术:

1、立即执行函数,执行过后立即销毁,不会污染全局变量。

2、闭包,产生私有化变量,不会污染全局;还可以把我们还要适用的内部方法保留到外部,来实现一些方法的调用。

举例说明:

 var name = 'bcd';
    //第一位开发者  
    var initPerson1 = (function (){
        var name = 'abc';
        function callName(){
            console.log(name);
        }
        function  a(){
            .....
        }
        function b(){
            .....
        }
        return function (){
            callName();
            a();
            b();
        }
    }())
    //第二位开发者
    var initPerson2 = (function (){
        var name = 123 ;
        function callName(){
            console.log(name);
        }
        function  a(){
            .....
        }
        function b(){
            .....
        }
        return function(){
            callName();
            a();
            b();
        }
    }())

这样不同的开发者代码里面的变量命名就不会产生冲突或覆盖。

欢迎大家补充。



猜你喜欢

转载自blog.csdn.net/qq_41713692/article/details/80432710