js19--继承终极版本

简介:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8>
        function extend(Child ,Parent){
             var F = new Function();//创建一个函数F,跟写 function F(){};一样
             F.prototype = Parent.prototype; 
             Child.prototype = new F(); 
             Child.prototype.constructor = Child ;
             
             //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
             Child.superClass = Parent.prototype; //自定义一个子类的静态属性 保存父类的原型对象,写 Child.superClass = Parent也可以。保证子类中可以找到父类。
             alert(Parent.prototype.constructor);
             alert(Parent);
             /*function Person( name , age){
                this.name = name ; 
                this.age = age ; 
            }*/
             alert(Parent.prototype.constructor ===  Parent);//true
             //判断父类的原型对象的构造器 (加保险),Person.prototype = {中不写constructor: Person ,那么Parent.prototype.constructor就是Object
             if(Parent.prototype.constructor == Object.prototype.constructor){
                Parent.prototype.constructor = Parent ; //容错性,就是写出你不知道的情形。
             }
        }
        
        
        function Person( name , age){
            this.name = name ; 
            this.age = age ; 
        }
        
        Person.prototype = {
            sayHello: function(){
                alert('hello world!');
            }
        };
        Object.defineProperty(Person.prototype , 'constructor' , {
             enumerable : false , 
             value : Person 
        });
        Person.prototype.say = function(){
            alert('hello world!');
        }
        
        function Boy(name , age , sex){
            //call,子类就可以直接new Boy(传3个参数),否则只能通过父类实例对象来访问添加的属性。
            //Person.call(this,name,age); Boy.superClass.constructor=Person,解耦,子类中不写父类的东西。
            Boy.superClass.constructor.call(this , name , age);
            this.sex = sex ;
        }
        extend(Boy , Person);
        Boy.prototype.sayHello = function(){//覆盖父类的方法
            alert('hi javascript!');
        }
        
        
        
        
        var b = new Boy('张三' , 20 , '');
        alert(b.name); //张三
        alert(b.sex);//
        b.sayHello();//hi javascript!
        //调用父类方法
        Boy.superClass.sayHello.call(b);//hello world!
        b.__proto__.__proto__.sayHello();//hello world!
        b.constructor.prototype.__proto__.sayHello()//hello world!
        alert(Boy.superClass.constructor);
        /*function Person( name , age){
            this.name = name ; 
            this.age = age ; 
        }*/
        </script>
    </head>
    <body>
    </body>
</html>
复制代码
复制代码
第一,子类调用call方法。
第二,子类原型对象的构造函数要改变,原型对象和自己对象的构造器指向函数本身(函数本身的prorotype和对象的__proto__指向原型对象)。
第三,子类增加一个静态属性指向父类的原型对象,办证子类可以找到父类。
第四,子类原型对象新增属性要写在creat之后,因为creat之后子类才有了原型对象。



function F(){
    this.name = "yw";
    var age = 32;
    sch = 890;
}    

var f = new F();  
alert(f.name);//yw
alert(f.age);//undefined
alert(f.sch);//undefined
alert(window.name);//空
F();
alert(window.name);//yw


var F = new Function();//创建一个函数F,跟写 function F(){};一样

//可以直接写constructor,prototype,不能写__proto__,_proto__是为了表示对象是怎么找到类的原型对象的属性方法的。
复制代码

子类通过prototype访问父类原型对象的属性、方法。

子类通过call访问父类实例对象的属性、方法。不加call方法,访问不到父类实例对象的属性、方法。

父类和对象以静态方式加的属性、方法,子类对象访问不到。

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/6877956.html,如需转载请自行联系原作者

相关文章
|
10月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
10月前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
169 61
|
10月前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
10月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
12月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
12月前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
719 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
11月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
852 4
|
12月前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
本文介绍了一个使用JavaScript和HTML5 Canvas API实现的贪吃蛇游戏的升级版本,该版本支持PC端和移动端,提供了丝滑的转向效果,并允许玩家通过键盘或触摸屏控制蛇的移动。代码中包含了详细的注释,解释了游戏逻辑、食物生成、得分机制以及如何响应不同的输入设备。
359 1
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
|
11月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
368 4
|
11月前
|
JavaScript 算法 内存技术
如何降低node.js版本(nvm下载安装与使用)
如何降低node.js版本(nvm下载安装与使用)