`
zccst
  • 浏览: 3315510 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[Object]继承(经典版)(二)原型链(原型继承)

阅读更多
作者:zccst

毫不夸张的说,这节是继承的核心所在。是重中之重。

一、原型链——将父类的实例赋给子类的prototype
function Person(name,age){
    this.name = name;
    this.age = age;
	this.arr = [11,22,33];
	this.alertName = "alertA";
    this.sayHi = function(){
        alert('hi');
    }
}

Person.prototype.walk = function(){
    alert('walk.......');
}

function Student(name,age,grade){   
    this.grade = grade;
}

Student.prototype = new Person();

var s1 = new Student('xiaoming',6,3);
/*
s1.walk();//walk.......
console.log(s1.name,s1.age,s1.grade);//undefined undefined 3
console.log(s1.constructor); // Person(name,age)
*/

var s2 = new Student('xiaowang',8,6);
console.log(s1.name,s1.age,s1.grade);
console.log(s2.name,s2.age,s2.grade);
s1.alertName = "alertB";
console.log(s1.alertName);
delete s1.alertName;
console.log(s1.alertName);
console.log(s2.alertName);
s1.arr.push(55);
console.log(s1.arr);
console.log(s2.arr);






Student.prototype.study = function(){
    alert('I am study');
}
var p1 = new Person();
//p1.study();// p1.study is not a function

缺点:虽然s1仍然指向父类的构造函数,但修改子类的共有方法并不会对父类有所影响,但是存在一个更为严重的问题是,子类没法继承父类的特权属性和特权方法。





二、原型链与call组合





三、原型继承的其他实现方式
1,直接将父类的prototype赋给子类的prototype
缺点:父类与子类耦合太高,因为改动了子类的prototype会影响父类。即使将原型对象的constructor指向子类构造函数,但子类和父类的实例都会共有相同的constructor,这种情形下修改子类的共有方法,同时会修改了父类的共有方法,说明此法不通。

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
        alert('hi');
    }
}
Person.prototype.walk = function(){
    alert('walk.......');
}
function Student(name,age,grade){   //子类
    this.grade = grade;
}
Student.prototype = Person.prototype;

var s1 = new Student('xiaoming', 6, 3);
s1.walk();//walk.......
console.log(s1.name, s1.age, s1.grade);//undefined undefined 3
console.log(s1.constructor); // 就是Person构造函数 Person(name,age){...}

//主要缺陷:不能继承父类的特权属性和特权方法,子类的构造函数变成了Person(name,age),直接导致修改子类的原型方法时,父类也跟着修改了,耦合度太高了。
Student.prototype.study = function(){
    alert('I am study');
}
var p1 = new Person();
p1.study();//I am study





2, niubility方式-利用空函数实现继承 
优点:这种情况下修改Student的prototype就不会影响到Person的prototype对象了,并且,因为直接将Person的prototype赋给Empty的prototype,所以不会存在特权属性(实例属性)浪费资源的问题。这样利用空函数就能很好的解决共有方法的继承问题了。当然这时Student.prototype中的constructor是Person,所以最好加上Student.prototype.constructor = Student转换过来。

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayHi=function(){
	alert('hi');
}

function Student(name,age,grade){
    Person.call(this,name,age);
    this.grade = grade;
}

function Empty(){
}
Empty.prototype = Person.prototype;

Student.prototype = new Empty();
Student.prototype.constructor = Student;//特别关键的一句
Student.prototype.sayGrade=function(){
	alert(this.grade);
}

var p1 = new Person('xiaoming',10);
var s1 = new Student('xiaohong',9,3);
console.log(p1);//Person { name="xiaoming", age=10, sayHi=function()}
console.log(s1);//Student {name="xiaohong", age=9, grade=3, 更多...}
console.log(p1.constructor);//Person(name,age) 父类的实例指向仍是父类
console.log(s1.constructor);//Student(name,age,grade) //子类的实例指向仍是子类



//以下是错误的
Student.prototype.study = function(){
    alert('I am study');
}
var o1 = new Person();
o1.study();//错误
var e1 = new Empty();
e1.study();//错误







3,利用循环遍历拷贝的方法实现继承(循环将父类原型对象赋给子类原型对象)
for(var i in Person.prototype){
Student.prototype[i] = Person.prototype[i];
}
Student.prototype.constructor = Student;*/

优点:
父类原型对象的constructor指向父类构造函数,
子类原型对象的constructor指向子类构造函数,

这种循环方式,跟父类的实例属性和方法,没有任何关系,所以继承的实现用Call。

function Person(name,age){
	this.name = name;
	this.age  = age;
	this.sayName = function(){
		alert(this.name);
	};
}
Person.prototype.sayAge = function(){
	alert(this.age);
}

function Student(name,age,grade){
	Person.call(this, name, age);
	this.grade = grade;
}
//循环copy方式继承
for(var i in Person.prototype){
	alert(i);//只循环了一次,就是将父类原型方法sayAge赋给子类原型对象
    Student.prototype[i] = Person.prototype[i];
}
//批注:for in只循环自定义的prototype对象属性和方法,所以并不会修改constructor指针指向

//继续添加方法
Student.prototype.sayGrade = function(){
	alert(this.grade);
}

var s1 = new Student("zheng", 30, 3);
console.log(s1);
console.log(s1.constructor);
s1.sayGrade();

var p1 = new Person("aliali", 50);
console.log(p1);
console.log(p1.constructor);
//p1.sayGrade();

其实,父类和子类是没有任何关系的,唯一的联系是子类的prototype



如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    深入理解javascript原型链和继承

    经典继承指的是早期的原型继承模式,它通过在子函数的原型对象上直接设置属性和方法来实现继承,这种方式存在的缺点与原型链继承类似。组合式继承是结合了原型链继承和构造函数继承的优点,既可以通过原型链继承父...

    学习javascript面向对象 javascript实现继承的方式

    组合继承,又叫伪经典继承,结合了原型链继承和借用构造函数继承。它通过原型链实现对原型属性和方法的继承,同时通过借用构造函数实现对实例属性的继承。 优点: - 保留了原型链继承和借用构造函数继承的优点。 - ...

    浅谈js对象的创建和对6种继承模式的理解和遐想

    本文将探讨JavaScript中对象的创建方式以及六种常见的继承模式,包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承以及寄生组合式继承。 首先,让我们从对象的创建开始谈起。在JavaScript中创建...

    【JavaScript源代码】深入JS继承.docx

    组合继承是结合了原型链和构造函数继承的方式,既保留了父类的属性,又能传递参数。子类的`prototype`指向父类的实例,同时在子类构造函数中调用父类构造函数。尽管解决了前面两种方式的缺点,但仍然存在性能上的...

    JS 面向对象之继承---多种组合继承详解

    首先,组合继承(也称伪经典继承)是结合了原型链继承和借用构造函数继承的两种方式,是目前JavaScript中最常用的继承方式之一。组合继承的核心在于利用原型链让子类的实例共享父类的方法,同时又通过构造函数来为...

    深入理解JavaScript是如何实现继承的

    在深入探讨JavaScript实现继承的具体机制之前,首先需要了解JavaScript本身的一些核心概念,包括函数、对象以及原型链。 JavaScript中的函数不仅可以用来定义行为,而且在ES6之前,函数还可以用来定义类。这与传统...

    JavaScript的六种继承方式(推荐)

    但是这种方法有一个问题,就是所有子类实例会共享从父类原型继承下来的属性,对于引用类型的属性,一个实例修改了该属性,其他实例也会受影响。 2. 构造函数继承(经典继承): 构造函数继承通过在子类的构造函数中...

    JavaScript中继承用法实例分析

    在深入探讨JavaScript中继承...我们了解了原型链继承、构造函数继承以及如何通过原型链和构造函数组合实现继承。掌握了这些知识,我们就可以在JavaScript编程中灵活地使用继承,设计出更加模块化和易于管理的代码结构。

    js代码-js继承的几种方式

    1. **原型链继承**:这是JavaScript最经典的继承方式,通过原型对象(`__proto__`或`Object.getPrototypeOf()`)将一个对象链接到另一个对象。当试图访问一个对象的属性时,如果该属性不存在,JavaScript会向上搜索...

    Javascript继承机制详解

    4. **构造函数继承与原型链组合**: 这是一种常用的继承模式,也称为"经典继承"。子类的构造函数调用父类的构造函数(通常通过`call()`或`apply()`),同时子类的`prototype`被设置为父类的实例,以保持原型链的连续...

    javascript面试应急知识点小结

    3. 继承方式:原型链继承、组合继承、寄生继承、原型式继承、寄生组合式继承、类式继承(ES6的class语法)等,理解它们的特点和适用场景。 三、闭包 闭包是一种特殊的函数,它可以访问并操作其外部作用域的变量,...

    Linux 桌面玩家指南:19. 深入理解 JavaScript,及其开发调试工具 - 京山游侠 - 博客园1

    原型链允许对象间共享属性和方法,通过`__proto__`或`Object.getPrototypeOf`访问。构造函数的`prototype`属性创建了实例对象的原型,而`new`运算符用于创建实例并设置原型链。 ### 作用域链、上下文环境和闭包 ...

    经典js案例

    4. 对象与原型链:JavaScript的对象是一种键值对的集合,原型链则是实现继承的方式。案例中会讲解如何创建和操作对象,以及如何利用原型链实现对象间的继承。 5. DOM操作:JavaScript与HTML的交互主要通过DOM...

    javaScript经典实例

    8. **对象与原型链**:JavaScript采用原型继承,每个对象都有一个原型(__proto__),可以通过`prototype`属性定义对象的方法,实现类的模拟。 9. **异步编程**:Promise、async/await等机制解决了JavaScript中的回...

    经典的JAVASCRIPT CHM参考手册

    原型链是实现继承的基础,通过原型链,子对象可以继承父对象的属性和方法。 4. **DOM操作**:JavaScript与HTML紧密相连,可以用于动态修改页面内容,如添加、删除、修改DOM元素,通过DOM API如getElementById、...

    javascript是怎么继承的介绍

    总的来说,JavaScript的继承机制是通过原型链实现的,可以通过不同的方式来实现子类对父类的继承,包括经典继承、改进的经典继承,甚至可以自定义`extend`方法来简化代码。理解这些实现方式对于编写可维护和高效的...

    JavaScript入门经典(第4版)源代码

    2. **基于原型**:对象可以通过原型链相互继承,允许创建复杂的对象结构。通过`__proto__`或`Object.getPrototypeOf`可以访问对象的原型。 3. **函数作为一等公民**:JavaScript中的函数可以被赋值给变量、作为参数...

Global site tag (gtag.js) - Google Analytics