CA88新登入JS原型对象通俗,javascript继承详解

1.关于原型对象的重要知识点
首先要知道一个很重要的知识点,一句话:所有对象都有原型对象.

1.关于原型对象的重要知识点
首先要知道一个很重要的知识点,一句话:所有对象都有原型对象.

javascript继承机制实例详解,javascript继承详解

本文实例讲述了javascript继承机制。分享给大家供大家参考。具体分析如下:

初学javascript一般很难理解Javascript语言的继承机制它没有”子类”和”父类”的概念,也没有”类”(class)和”实例”(instance)的区分,全靠一种很奇特的”原型链”(prototype
chain)模式,来实现继承。

我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。

一、如何创建一个类

假设有给叫Person的类如下:

复制代码 代码如下:

var Person = function(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function() {
    return this.name;
}

如上:Person代表地球上所有的人,每个人都有这两个基本属性:name和age;现在我们要实现一个学生类,然后我们知道了;
学生也是一个人,及学生也有name和age等属性;现在的问题是怎么能把这个关系给搭起来?
先来看看纯面向对象的语言是如何做到的(如:Actionscrpt3)

复制代码 代码如下:

class Students extend Person {};
//很简单,一行代码;更确切的说是一个单词–extend

二、换成js如何能做到

在讲解js的继承机制实现之前,先了解一下js的原型链:

复制代码 代码如下:

var person = new Person(‘Poised-flw’, 21);
person.getName(); // “Poised-flw”

就上面的getName()方法来说,是如何执行的?首先会在Person这个函数里面找是否有getName()这个方法,发现没有;然后就转到
Person.prototype中寻找,发现有!然后就调用,若没有呢?继续按照相同的方法一直沿着prototype寻找下去,直到找到方法或者
达到原型链的顶端为止!

举例来说,现在有一个叫做DOG的构造函数,表示狗对象的原型。

复制代码 代码如下:

  function DOG(name){
    this.name = name;
  }

对这个构造函数使用new,就会生成一个狗对象的实例。

复制代码 代码如下:

  var dogA = new DOG(‘大毛’);
  alert(dogA.name); // 大毛

注意构造函数中的this关键字,它就代表了新创建的实例对象。

三、new运算符的缺点

用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。
比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species。

复制代码 代码如下:

  function DOG(name){
    this.name = name;
    this.species = ‘犬科’;
  }

然后,生成两个实例对象:

复制代码 代码如下:

  var dogA = new DOG(‘大毛’);
  var dogB = new DOG(‘二毛’);

这两个对象的species属性是独立的,修改其中一个,不会影响到另一个。

复制代码 代码如下:

  dogA.species = ‘猫科’;
  alert(dogB.species); // 显示”犬科”,不受dogA的影响

每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。

所以:继承的思想: 通过js特有的原型链来实现继承机制!

四、基于原型链的继承

1.直接继承实现

复制代码 代码如下:

var Students = function(name, age, sid) {
    Person.call(this, name, age);
    this.sid = sid;
}
Students.prototype = new Person();
//把Person放到Students的原型链上实现继承机制
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
    // 得到学生的成绩
}

一定不要少了Students.prototype.constructor =
Students这一行!,定义一个构造函数的时候,它默认的prototype是一个Object实例,然后prototype的constructor属性自动被设置成该函数本身
!!!若手工将prototype设置为另一个对象的时候,则新对象自然不会具有原对象的contructor值,故需要重新设置其constructor属性。如:

复制代码 代码如下:

var Test = function() {
    this.time = “now”;
}
console.log(Test.prototype); // Object {} 一个空对象
console.log(Test.prototype.constructor); // function() {this.time =
“now”;},及函数本身
// 若手工改变Test的prototype属性
Test.prototype = {
    someFunc: function() {
        console.log(‘hello world!’);
    }
};
console.log(Test.prototype.constructor); // function Object() { [native
code] }
//
然后你会发现完全指错了,故手动更改prototype属性的时候需要更改它的constructor指向;

经过上面的测试就知道为什么要修改constructor值了。

2.封装继承的函数extend

复制代码 代码如下:

function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
}

其实这个函数的功能只是对上面继承过程的一个封装,不同的有:
只继承了superClass的prototype属性,并没有继承superClass构造函数中的属性;
这样做的优点在于:减少去new一个构造函数的开销!
当然随之的问题是不能单一的通过这个函数就能让subClass继承superClass的所有属性
改进:

复制代码 代码如下:

// 在Students构造函数中继续添加一行代码:
Person.call(this, name, age);

五、小结

利用js的原型链原理,我们可以很容易的实现js的继承机制,尽管不是非常的严格,但是我的目的达到了:
重复的代码尽量出现一次!

希望本文所述对大家的javascript程序设计有所帮助。

本文实例讲述了javascript继承机制。分享给大家供大家参考。具体分析如下:
初学javascript一般…

**2. 对比其他语言的理解

**2. 对比其他语言的理解

**原型对象,就是其它语言中的类中的静态属性和静态方法,总是是静态-static就对了.原理是:
内存中只有一份.

**原型对象,就是其它语言中的类中的静态属性和静态方法,总是是静态-static就对了.原理是:
内存中只有一份.

**3. 在内存中的形象图:

**3. 在内存中的形象图:

**首先,在产生js对象之前,我们需要创造一个构造函数(这都不知道,那就不要往下看了),如下:

**首先,在产生js对象之前,我们需要创造一个构造函数(这都不知道,那就不要往下看了),如下:

复制代码 代码如下:

复制代码 代码如下:

function Person(name_, age_) {
this.name = name_;
this.age = age_;
}

function Person(name_, age_) {
this.name = name_;
this.age = age_;
}

下面,我们就要new 对象了,这里,我们new三个(Person)对象,”张三” “李雷”
“韩梅梅”,他们来自同一个构造函数Person:

下面,我们就要new 对象了,这里,我们new三个(Person)对象,”张三” “李雷”
“韩梅梅”,他们来自同一个构造函数Person:

CA88新登入 1

CA88新登入 2

内存中就这样了,每个对象,都有自己的 name, age
内存.这里new了多少个对象,就要开辟多少块name, age内存.

内存中就这样了,每个对象,都有自己的 name, age
内存.这里new了多少个对象,就要开辟多少块name, age内存.

看到这,应该还是比较好理解的. 下面我们添加一条属性.location属性,如下:

看到这,应该还是比较好理解的. 下面我们添加一条属性.location属性,如下: