继承模式-上

Javascript继承模式(上)

1.传统继承(原型链)

缺点:过多继承了没用的属性。

以下是一个原型链,three只想使用一个name的属性,结果自身多继承了age,sex等属性

        <script type="text/javascript">
        
        One.prototype.name = 'test';
        
        function One() {
        
        this.age = 1;
        
        }
        
        var one = new One();
        
        Two.prototype = one;
        
        function Two() {
        
        this.sex = 'male';
        
        }
        
        var two = new Two();
        
        Three.prototype = two;
        
        function Three() {
        
        }
        var three = new Three();
        
        </script>

2.借用构造函数(call和apply)

缺点:使用call和apply不能继承该构造函数的原型。

每次执行构造函数都要多走一个函数,示例:

每次执行构造函数People时都会执行Person.call去引用Person里的值。

这种方法只是减少了代码量,运行步骤一点也没减小。

        <script type="text/javascript">
        
        function Person(name, age) {
        
        this.name = name;
        
        this.age = age;
        
        }
        
        function People(name, sex, height, age) {
        
        Person.call(this, name, age);
        
        this.sex = sex;
        
        this.height = height;
        
        }
        
        var people = new People('墨小白', 'male', 172, 18);
        
        </script>

在做开发的时候,如果有以上的那种需求的话(一个函数完全包含了另一个函数),还是建议使用这种方法的。


3.共享原型

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

因为原型是共享的,一旦有一个构造函数对自己的原型进行了修改,都会影响到其他构造函数。

                <script type="text/javascript">
		
		Father.prototype.lastName = '白';
		
		function Father() {
		
		}
		
		function Son () {
		
		}
		
		Son.prototype = Father.prototype;
		
		var son = new Son();
		
		</script>

可以把这种操作封装成一个方法,以便随时调用。

		<script type="text/javascript">
		
		Father.prototype.lastName = '白';
		
		function Father() {
		
		}
		
		function Son () {
		
		}
		
		function inherit(Target, Origin) {
		
		Target.prototype = Origin.prototype;
		
		
		}
		
		inherit(Son, Father);
		
		var son = new Son();
		
		</script>

4.圣杯模式

利用原型链,加一个中间层。

在共享原型的基础上,自己修改原型也不会影响到其他构造函数。

		<script type="text/javascript">
		
		Father.prototype.lastName = '白';
		
		function Father() {
		
		}
		
		function Son () {
		
		}
		
		function Lk() {}//加一个中间层Lk
		
		Lk.prototype = Father.prototype;//使Lk的原型为Father的原型
		
		Son.prototype = new Lk();//Son的原型为Lk对象
		
		var son = new Son();//此时Son修改原型的话修改的是Lk对象,调用的话还是调用的Father的原型。
		
		</script>

可以封装成方法,以便使用。

		<script type="text/javascript">
		
		Father.prototype.lastName = '白';
		
		function Father() {
		
		}
		
		function Son () {
		
		}
		
		function inherit(Target, Origin) {
		
		function Lk() {};
		
		Lk.prototype = Origin.prototype;
		
		Son.prototype = new Lk();
		
		}
		
		inherit(Son, Father);//传参使用
		
		var son = new Son();
		
		</script>

原创博客,盗版必究

猜你喜欢

转载自blog.csdn.net/dfggffdd/article/details/80078214