Js的 "继承"

Js 和 Java , C等语言不是很一样 . 其他语言有 类和实例 但是Js就比较特殊 , 所以 类和实例 只能说是大多数面向对象编程的语言的基本概念 .

Js比较特殊 , 它不去分类和实例的概念 .  而是通过原型(prototype)来实现面向对象编程  .

下面介绍Js中第一种用于继承的方法

var robot = {
    name: ‘Robot‘,
    height: 1.6,
    run: function () {
        console.log(this.name + ‘ is running...‘);
    }
};

这一段代码 , 声明了一个对象robot . 这个对象有姓名 , 身高(属性) , 还有自己的行为(方法) . 如果我们能根据这一个对象来建立另一个对象该是多么美好的事情呀 .

有需求就有产出 . 所以请看下面的代码 . 我们可以根据已经有的 "实例" 来声明一个新的 "实例"  .

var Student = {
    name: ‘Robot‘,
    height: 1.2,
    run: function () {
        console.log(this.name + ‘ is running...‘);
    }
};

var xiaoming = {
    name: ‘小明‘
};

xiaoming.__proto__ = Student;

可以看出 , 我们先写了一个Student的实例 , 然后谢了一个xiaoming的实例 . 最后我们讲小明的原型 (prototype) 指向了 Student . xiaoming有自己的name属性 , 但是没有run方法 , 然后从Student中继承下来 , 得到了 Student的run方法.

这个方法不建议使用 . 因为低版本的IE不支持 . 下面我们说一个真正用的继承 .

除了直接用 {...} 来创建一个对象之外 . Js 还有一种利用构造方法 , 来创建对象的方法 . 首先我们定义一个构造函数 .

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert(‘Hello, ‘ + this.name + ‘!‘);
    }
}

... 这个是不是有点像普通的函数 ? 但是普通函数是不能直接写this的会报错 .  我们可以通过一个关键词 new 来调用这个函数将函数转变为 构造函数 , 然后去声明一个对象. .

var xiaoming = new Student(‘小明‘);
xiaoming.name; // ‘小明‘
xiaoming.hello(); // Hello, 小明!

如果我们不写new 的话 this是指向undefined的 . 然后xiaoming.name也只会返回一个undefined . 但是如果我们写了new 这个普通的函数就会变成一个构造函数 . 然后在函数的末尾自动加上一个 . return this;

构造函数千万不要忘记写new 此外为了区分普通函数和构造函数 , 我们按照约定构造函数的首字母应该大写 . 在某些语法检查工具当中这样的好习惯会在你忘了写new的时候检测到并且提醒你写错了 .

在传统的面向对象语言如 C++ Java继承的本质是扩展一个现有的Class 生成一个Subclass . 由于这些语言严格区分类和实例 , 所以继承实际上是对类型的扩展 , 但是Js中由于采用原型继承,我们无法直接扩展一个类 , 因为根本就不存在Class这种类型(听起来Js还听骄傲?)

时间: 2024-11-18 17:42:25

Js的 "继承"的相关文章

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"> 

JS对象继承篇

JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person(){ this.name = "Person"; } Person.prototype.getName = function(){ return this.name; }; function SuperPerson(name,sex){ this.name = name; this.sex

JS 类继承 原型继承

参考文档:JS原型继承和类继承 <script src="jquery-2.0.3.js"> </script> <script> /*//类继承 var father=function(){ this.age=53; this.say=function(){ console.log("name:"+this.name+",age:"+this.age); } }; var child=function(){

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

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

js:深入继承

/** * js实现继承: * 1.基于原型链的方式 * 2.基于伪造的方式 * 3.基于组合的方式 */ 一.基于原型链的方式 function Parent(){ this.pv = "parent"; } Parent.prototype.showParentValue = function(){ console.log(this.pv); } function Child(){ this.cv = "child"; } //让Child的原型链指向Paren

JS组合继承的通用工具函数

此工具函数没实际意义,只是鉴于EXT的extend方法不太好理解,写了一个简化的extend方法,帮助理解. /** * */ E = {}; E.extend = function(sub, sup) { //借用构造函数 sub.prototype = sup; //保留父类的构造函数,以便在子类构造函数中用调用,将父类变量绑定在this下 sub.prototype.superclass = sup.constructor; //因为重写了构造函数所以重新指定constructor,以使i

浅谈JS的继承

JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无法实现接口继承,ES只支持实现继承.                                                                                                                                    

js实现继承的5种方式

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值 Js代码   function Parent(firstname) { this.fname=firstname; this.age=40; this.sayAge=func

浅谈js中继承的理解和实现

一.前言 java.C#等正统面向对象语言都会提供类似extend之类的处理类的继承的方法,而javascript并没有提供专门的方法用于继承,在javascript中使用继承需要一点技巧.js中实例的属性和行为是由构造函数和原型两部分组成的,js的继承也分为这两部分.下面给大家分享一下在js中如何实现继承,讲的不对的地方望大家指正! 二.继承构造函数中的属性和行为 我们定义两个类Animal和Bird类,来实现js中类的继承. //定义Animal类 function Animal(name)

js的继承实现方式

1. 使用call或者apply来实现js对象继承 function Animal(age){ this.age = age; this.say = function(){ console.log('age:'+this.age); }; } function Dog(age,nickname){ Animal.call(this,age); // Animal.apply(this,[age]); this.nickname = nickname; this.say = function(){