javaScript-原型、继承-02

原型链

首先回顾下实列、构造函数、原型对象之间的关系;

实列都包含指向原型对象的一个指针(_proto_);

构造函数都有prototype(原型属性)指向原型对象的指针;

原型是一个对象也存在一个内部属性(_proto_)指向父类(上一级)原型对象;

那么原型链就是:实例通过 _proto_ 递归往上查找就构成实例与原型的链条(object除外,它是基类);

function Person(){

    }

链图:

总结:

1、所有引用类型默认都继承Object

2、所有函数的默认原型都是Object的实例,类似于:原型对象=new Object(),因此默认原型都会包含一个内部指针(_proto_),指向Object.Prototype;

3、所有引用类型对象都有_proto_属性指向原型对象,所有function 对象都有prototype 属性,指向原型对象;

原型链-继承

我所知道的继承有两种方式:

1、接口继承:只继承方法签名;

2、实现继承:继承实际的方法;

因为js中函数没有签名所以无法实现接口继承,只支持方法继承,并且是依靠原型链来实现的;

    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;

    }
    Person.prototype.sayHello=function(){ console.log("hello word!")};

   function Man(){

   }
    Man.prototype=new Person();
    var instance=new Man();
    console.log(instance.sayHello);// hello word!

以上就是很简单的继承,把Man原型指针指向Person的一个实例,这样new Man()的实例就可以访问到Person中的sayHello方法,如图所示;

原型链也是存在一些问题把上面代码改下:

    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.color=["red","blue","green"];

    }
    Person.prototype.sayHello=function(){ console.log("hello word!")};

   function Man(){

   }
    Man.prototype=new Person();
    var instance=new Man();
    instance.color.push("black");
    console.log(instance.color);//["red", "blue", "green", "black"]
    var instance2=new Man();
    console.log(instance2.color); //["red", "blue", "green", "black"]

我们知道原型是所有实例共享属性、方法,当使用原型来实现继承时,原型实际上会变成另一个类型的实例,所以就会出现上面的问题;

组合继承

组合继承的原理很简单,在构造子类对象实例的时候通过改变this 指针让子类对象实例拥有父类属性以及自身构造的属性,这样可以达到实例之间有独立的属性副本,

方法的继承还是通过原型来实现,来看代码:

  function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.color=["red","blue","green"];

    }
    Person.prototype.sayHello=function(){ console.log("hello word!")};

    function Man(name,age,sex,job){
        Person.call(this,name,age,sex);
        this.job=job;
    }
    Man.prototype=new Person();
    var instance=new Man("张三",20,"男","农民");
    instance.color.push("black");
    console.log(instance.color);//["red", "blue", "green", "black"]
    console.log(instance.job);//农民
    console.log(instance.sayHello);//hello word!

    var instance2=new Man("张三",20,"男","地主");
    console.log(instance2.color); //["red", "blue", "green"]
    console.log(instance2.job);//地主
    console.log(instance2.sayHello);//hello word!

通过在构造函数中指向父类,这样实例对象存在父类的属性,前面说过搜索原理是从实例开始的,那么即使是原型对象是父类的实例对象,属性还是取的是实例对象中的属性;

组合模式是JavaScript中常用的继承方式;

call、apply、bind(绑定)

JavaScript中函数可以通过3种方法改变自己的this指向,它们是call、apply、bind。它们3个非常相似,但是也有区别。下面表格可以很直观看出三者的不同

方法 是否直接执行函数 传入的参数 调用方式
call
(context,arg1,arg2,arg3...)

第二个参数之后都是实参


function.call(context,arg1,arg2,arg3...)

apply
(context,[arg1,arg2,arg3...])

第二个参数必须是数组


function.apply(context,[arg1,arg2,arg3...])

bind
(context,arg1,arg2,arg3...)

第二个参数之后都是实参


var newFunction = function.bind(context);

newFunction(arg1,arg2,arg3...)

call和apply功能:使用指定的对象调用当前函数。call和apply的功能完全相同,只是在语法上略有不同。

call :

var a = {x: 1};
    var b = function (y, z) {
        console.log(this.x + y + z)
    };
    b.call(a, 3, 4);//此时b的this(即b执行时的上下文)被改变为a,因此this.x为1,第二个参数之后都是传给b实参。

apply:

 var a = {x: 1};
    var b = function (arr) {
        console.log(this.x + arr[0] + arr[1])
    };
    b.call(a, [3, 4]);//此时b的this(即b执行时的上下文)被改变为a,第二个参数是一个数组

bind:

var a = {x: 1};
    var b = function (y, z) {
        console.log(this.x + y + z)
    };
    var newB = b.bind(a);//此时b的this(即b执行时的上下文)被改变为a,由此生成一个新函数,函数不会立即执行。
    newB(3, 4);//函数此时才执行

call或apply是将执行上下文对象换了后,立即执行;而bind是将执行上下文对象换了后,创建一个新函数。

function fun(){
               console.log(this.name);
           }
           function obj1(){
               this.name = ‘call||apply‘;
           }
           function obj2(){
               this.name = ‘bind‘;
           }
           var o1 = new obj1();
           var o2 = new obj2();
           fun.call(o1);
           //手动调用bind创建的新函数
           fun.bind(o2)();

在网上找了张比较完整原型链图:

总结

1、原型链的形成真正是靠 _proto_,指向原型对象;

2、引用类型默认都继承Object;

3、所有函数的默认原型都是Object 实例,即默认原型对象也有一个内部属性 _proto_指向 Object prototype 对象;

4、Function.prototype是函数类型的原型;

5、继承主要是基于原型链实现的,而原型链主要是基于实例与原型对象链条实现,引用类型任何对象都有内部属性 _proto_指向原型对象;

时间: 2024-11-08 14:05:31

javaScript-原型、继承-02的相关文章

JavaScript原型继承的陷阱

JavaScript原型继承的陷阱 JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱. 先看第一个例子 var creat

[JavaScript原型继承理解一]

转:http://www.cnblogs.com/harolei/p/3740354.html 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sponsor的一对一辅导和自己回来后反复思考,总算觉得把其中的精妙领悟一二了. 1. JavaScript创建对象 在面向对象语言中,通常通过定义类然后再进行实例化来创建多个具有相同属性和方法的对象.但是在JavaScript中并没有类的概念

彻底理解Javascript原型继承

彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员与原型成员 举一个<高性能Javascript>书中例子 var book={ title :"High Performance JavaScript", publisher:"Yahoo!Press" }; alert(book.toString());/

JavaScript 原型继承开端

1.原型继承本质       就javascript对象系统的实现来讲,对象并没有原型,而构造器有原型(构造器.prototype指向其原型).对象只有构造自某个原型的说法,并没有持有某个原型的说法.原型其实也是一个对象实例.原型的含义是指:如果构造器有一个原型对象A,则由该构造器创建的实例都必然复制自A. 2.空的对象是所有对象的基础 来看看以下代码: 1 <html> 2 <head> 3 <meta http-equiv="content-type"

Javascript原型继承容易忽略的错误

编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象语言的特性是继承,封装,多态,抽象,而本文讨论的是Javascript的继承,Javascript的继承方式有原型继承,组合继承,寄生继承等等,在日常开发中,哪种继承方式更好用在于开发者对于程序的结果以及性能的考虑.笔者在下面列举出原型继承中经常容易被忽略的错误. 常见错误一: function F

javascript原型继承圣杯模式

javascript纯面向对象开发需要使用到的一个模式,来对对象之间原型继承做中间层代理避免重复继承与代码杂乱 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

javascript --- 原型继承与属性拷贝的综合应用

对于继承来说,主要目标就是将一些现有的功能据为己有.也就是说,我们在新建一个对象的时候,通常首先继承现有对象,然后再为其添加额外的属性和方法. 对此,我们可以通过一个函数调用来完成. 具体而言就是: 1. 使用原型继承的方式,将一个已有对象设置成新对象的原型. 2. 新建一个对象后,将另一个已有对象的属性拷贝过来. function objectPlus(o, stuff){ var n; function F(){}; F.prototype = o.prototype; n = new F(

javascript原型继承

用一张图来表示新的原型链: 封装一个inherits()函数,函数F用于桥接 function inherits(Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; } 这样inherits()函数就可以重复使用了 function Student(props) { this.

【转载】Javascript原型继承-学习笔记

阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 笔记如下: 一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(p

Javascript 原型继承(续)—从函数到构造器的角色转换

对于每一个声明的函数,里边都会带有一个prototype成员,prototype会指向一个对象,现在我们来聚焦prototype指向的这个对象,首先我们会认为,这个对象是一个该函数对应的一个实例对象,因为我们在new一个对象的时候,通常都会继承该原型prototype对象的属性和方法.比如: 1 <html> 2 <head> 3 <meta http-equiv="content-type" charset="utf-8"/>