js 面向对象 继承

继承方式有四种:

1、call

2、apply

3、prototype

4、for in

call 和 apply 的主要区别:

call 传参数只能一个一个的传,

apply 因为是用数组,所以可以用arguments 获取所有的实参。当参数多时,就用apply更方便。

arguments = 返回参数集合

call 和 apply 继承

已打飞机游戏为例:

创建飞机时有很多重复的步骤

以创建玩家飞机 用call 继承 和用applay 创建boss飞机为例:

/*父模板*//*x,y,节点,blood,speed* move* shoot XXX* init* */
 1   /*通用的父模板*/
 2     function Plane(x,y){
 3     console.log("plane构造函数")
 4     console.log(this);
 5       this.x = x;
 6       this.y = y;
 7       this.imgNode = document.createElement("img")
 8       this.imgsrc="";
 9       this.blood=5;
10       this.speed=10;
11       this.move=function(){
12         console.log("Plane的move方法");
13       }
14       this.init=function(){}
15       this.init();
16     }
/*1.call*/
    function PlayerPlane(px,py){
    console.log(this);    //new PlayerPlane()
     // call传递参数,参数依次写上
    Plane.call(this,px,py); //写在代码第一行
//     重写 ==》多态 同一个方法,不同的实现方式
    this.x=1000;
    this.move=function(){
    console.log("Player Plane 的move方法")
    }
     this.shoot=function(){}
    }

    var playerplane = new PlayerPlane(200,300);
    console.log(playerplane.hasOwnProperty("x")); //true
    console.log(playerplane.x)
    playerplane.move();
 /*2.apply*/

    function BossPlane(bx,by){
      console.log(arguments);   //参数数组
      Plane.apply(this,arguments);
      this.move=function(){
        console.log("Boss飞机的移动");
      }
    }

    var bossplane = new BossPlane(100,200);
    console.log(bossplane.x,bossplane.y);
    bossplane.move()

原型继承

    /*通用的手机模板*/
    function Phone(name,price){
      this.phoneName = name;
      this.price = price;
      this.color="red";
      this.callPhone=function(){

      }
    }

    function IPhone(){
      this.color="blue";
      this.music=function(){
        console.log("听音乐");
      }
      this.news=function(){
        console.log("看新闻");
      }
    }

    var iphone1 = new IPhone();
    console.log(iphone1.color);

    //原型链继承
    IPhone.prototype = new Phone("苹果",6000);
    var iphone2 = new IPhone();
    console.log(iphone2.color);

    console.log(iphone1.__proto__); //原本的Iphone.prototype, 空对象
    console.log(iphone2.__proto__); //new Phone()
    console.log(iphone1.__proto__===iphone2.__proto__); //false

    IPhone.prototype.newfunc=function(){
      console.log("新添加的功能");
    }
    iphone1.__proto__.newfunc2=function(){
      console.log("另外一个新添加的功能");
    }
//    iphone1.newfunc2();
//    iphone2.newfunc();
    console.log("color" in iphone2);    //true
    console.log(iphone2.hasOwnProperty("color"));   //false

区别与前两种方法:


通过原型链继承的属性不是自己的,


只是存在于原型链上。

 
 Phone.country="中国";
//    var p = new Phone();
//    console.log(p.country)    //undefined 原型链上并没有
//    console.log("country" in p) //false
    /*p = 实例化对象
    * Phone = 函数 --- 函数也是一个对象*/
//    console.log(Phone.country);   //只有Phone函数才能调用country

//    var iphone1 = new IPhone();
//    console.log(iphone1.country);

    IPhone.prototype = new Phone();
    var iphone2 = new IPhone();
    console.log(iphone2.country);   //undefined
    console.log(iphone2.color);

    IPhone.prototype = Phone;
    var iphone3 = new IPhone();
    console.log(iphone3.country); // 打印得出来了
    console.log(iphone3.color);  // undefined
    console.log(iphone3.__proto__.__proto__.__proto__)

//prototype 指向一个对象就行了,可以是自己创建的新对象。
    IPhone.prototype={
      newAttr1:"新属性1",
      newAttr2:"新属性2"
    }
    var iphone4 = new IPhone();
    console.log(iphone4.newAttr1);
时间: 2024-11-09 00:47:16

js 面向对象 继承的相关文章

关于 JS 面向对象继承属性和方法的小例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>关于 JS 面向对象继承属性和方法的小例子</h1> </body> </html> <script> //人的构造函

js面向对象继承

前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2.字面量的方式 如果想要复用的话,可能会用到工厂方法 工厂方法每次都要创建对象 并返回 构造方法创建对象方法可以更简洁 然而构造方法用实现实例间共享共同的方法,比较麻烦 原型可以实现实例共享所有属性 每个函数都有指向原型对象的指针,如果将一个函数的原型属性赋值给另外函数的实例,函数的原型将指向另外一

js面向对象-继承

定义父类 // 原型模式与构造函数组合 function Person(name,age,job) { // 构造函数模式定义实例属性 this.name = name; this.age = age; this.job = job; } Person.prototype = { //原型模式定义方法和共享属性 constructor: Person, //重写原型改变了constructor,修正回来 sayName:function() { alert(this.name); }, sayJ

JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链 JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法 1.Object类 在JS中,Object是所有类的基

JS面向对象(封装,继承)

在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来理解这些还是很容易的. 所以趁着自己空闲的时间,理一理,,这些,, 一.封装 1.原始方法 1 // 通过new关键字生成一个对象,然后根据javascript是动态语言的特性来添加属性和方法,构造一个对象.其中this表示调用该方法的对象. 2 var obj = new Object(); 3

js面向对象编程(二) 构造函数继承

构造函数绑定 //基类建筑物var building = function () {    this.spec = "building";}; //address:房子地址,toward:房子朝向var house = function (address, toward) {    this.address = address;    this.toward = toward;}; //使房子继承建筑物 //使用call或者apply方法,将父对象的构造函数绑定在子对象上,在子对象构造

js(面向对象,继承与原型对象)

一.定义: 程序用来描述的生活中的具体事务(对象:是封装一个事物属性与功能的程序结构):主要是用于大程序的维护 二.创建面向对象 1.自定义对象直接量(创建对象) 语法:var obj = { 属性名:属性值, ....:...., 方法名:function(){..this.属性名..}, ... } 举例:var lilei={ sname:"Li Lei", sAge:12, intr:function (){ console.log("I'm "+this.

js面向对象编程/原型链/继承 —— javascript

目录 js面向对象编程 js原型链 共享方法 原型继承 js面向对象编程 js面向对象编程不同于 java 的类和对象 JavaScript 不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程. js声明的构造函数,类似于普通函数的声明,但又不同, 实例对象时,如果不写new,就是一个普通函数,它返回 undefined. 但是,如果写了new,它就变成了一个构造函数,它绑定的 this 指向新创建的对象, 并默认返回 this,也就是说,不需要在最后写return th

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript">