深入理解js继承

1.传统js对象生成方式

①var nam = {
    name = "hkj"
    age = "20"
}
②var man1 = {};
  man1.name = "hkj";
  man1.age = 20;

2.方法改进

  function Man(name,age) {
      return {
          name:name;
     age:age
      }
  }
  var man2 = Man("hkj",20);

3.构造函数

  function Man(name,age) {
      this.name = name;
      this.age = age;
      this.work = function(){alert("人都需要工作");}
  }
  var man3 = new Man3("hkj",20);
  vat man4 = new Man4("h",21);
  alert(man3.age);
  alert(man4.name);
  由构造函数生成的对象都具有同一个constructor属性,指向构造函数
  man3.construcor == man4.constructor == Man
  可用instanceof运算符判断对象与类的关系
  alert(man3 instanceof Man);//true
  缺点:每个不同对象都存在一个相同的work方法,但每次生成对象时work都会生成一次,占用内存

4.prototype(原型)模式

  prototype为构造函数的一个属性,指向另一个对象,该对象所有属性方法都会被构造函数实例继承。一般用来存放公有方法和属性。
  function Man(name,age){
      this.name = name;
      this.age = age;
  }
  Man.prototype.work = function(){alert("人都需要工作");{}
  var man5 = new Man("hkj",20);
  man5.work();
  优点:所有实例对象的work方法都使用了同一个内存地址指向了prototype对象,提高了效率。
  相关方法:
  alert(Man.prototype.isPrototypeOf(man5)); //true     判断prototype与实例之间的关系
  alert(Man.hasOwnProperty("name"));  //true       判断是否是本地属性
  alert("name" in man5);   //true     判断是否含有某个属性

5.继承

  ①构造函数继承

   function People(){
this.type="人";
   }
   function Man(name){
this.name=name;
People.apply(this,arguments);  //将子类构造函数与父类构造函数绑定
        People.call(this,name); //与apply方法功能相同,区别后面需要传入所有参数,而apply传入参数数组
   }
   var man=new Man("hkj");
   alert(man.type);

   ②prototype继承

    function Person(){
        this.type="人";
}
    function Man(name){
this.name=name;
    }
    Man.prototype=new Person();  //将man的prototype指向Person实例
    Man.prototype.constructor=Man;  //手动纠正由上一行导致man的构造函数为Person的错误
    var man=new Man("hkj");
    alert(man.type);

    ③prototype直接继承

    function Person(){}
    Person.prototype.type="人";
    function Man(){}
    Man.prototype = Person.Prototype;
    Man.prototype.constructor=Man;
    var man=new Man();
    alert(man.type);
    缺点:Man和Person的prototype变成了同一个,任何对子类的修改将影响到父类。而且后面的手动纠正也将Person的构造函数变成了Man的构造函数

    ④空对象继承 //对于直接继承的一种改进,利用中介对象消除手动纠正对父级构造函数的影响

    function Person(){}
    Person.prototype.type="人";
    function Man(){}
    function F(){}
    F.prototype=Perosn.prototype;
    Man.prototype=new F();
    Man.prototype.constructor=Man();
    方法封装:
    function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;   //连接Child与Parent,备用性质
  }

    ⑤拷贝继承

    function extend2(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
      c[i] = p[i];
      }
    c.uber = p;
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解现代JavaScript是指对JavaScript语言的深入学习和理解,包括其核心概念、特性和高级用法。以下是一些可以帮助你深入理解现代JavaScript的主题: 1. 闭包:了解闭包的概念和作用,以及如何使用闭包来创建私有变量和函数。 2. 原型和原型链:理解JavaScript中的原型继承机制,包括原型对象、原型链和原型继承的实现方式。 3. 异步编程:掌握JavaScript中的异步编程模式,包括回调函数、Promise、async/await等,以及如何处理异步操作和避免回调地狱。 4. ES6+特性:熟悉ES6及其之后版本引入的新特性,如箭头函数、解构赋值、模板字符串、类和模块等。 5. 函数式编程:了解函数式编程的概念和优势,学习如何使用高阶函数、纯函数和不可变数据等函数式编程的概念和技巧。 6. 模块化开发:掌握模块化开发的概念和实践,包括CommonJS、ES6模块和AMD等模块化规范。 7. 工具和框架:熟悉常用的JavaScript工具和框架,如Webpack、Babel、React和Vue等,了解它们的使用和原理。 8. 性能优化:学习如何优化JavaScript代码的性能,包括减少重绘和回流、使用缓存、懒加载和代码分割等技巧。 9. 错误处理和调试:掌握JavaScript中的错误处理和调试技巧,包括使用try-catch语句、调试工具和日志记录等。 10. 安全性考虑:了解JavaScript中的安全性问题,包括跨站脚本攻击(XSS)、跨站请求伪造(CSRF)和点击劫持等,学习如何防范这些安全威胁。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值