美文网首页
javascript原型与原型链笔记

javascript原型与原型链笔记

作者: 我随便取的名 | 来源:发表于2017-07-31 20:43 被阅读0次

在实际编程中常常需要面向对象编程,如果你熟悉c++你就知道可以写一个类,对象可以继承类的属性和功能。其实javascript也有类似的用法,不过概念不同,它不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。
跟着大神学习(廖雪峰的javascript教程)


__ proto __: 可以将对象指向指定原型

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

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

xiaoming.__proto__ = Student;

原型链

JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。
例如,创建一个Array对象:

var arr = [1, 2, 3];

原型链为:arr ----> Array.prototype ----> Object.prototype ----> null

举例来说,如果你定义了一个数组对象,它指向Array原型,之后你就可以使用javascript已经定义好的功能了(封装在Array中),比如arr.length等等。

大多数情况下我们需要定义一个构造函数,需要我们自己定义的对象可以使用构造函数的功能。那要怎么写呢?
看例子:

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

首先写一个构造函数(Student-----ps:按照规则构造函数首字母大写),然后定义一个对象用new指向构造函数,现在就可以使用构造函数里面的功能了。

原型链

原型链
prototype: 原型
constructor: 构造器

为节约内存,可以直接把共同的函数写在对象共同的原型上,也就是Student.prototype
例如上面的例子可以改为:

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

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

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • JavaScript深入理解this关键字(一)

    摘要 最近在公司需要做培训,我打算把JavaScript中的原型与原型链讲给大家。但我在梳理原型与原型链的时候发现...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • javascript原型与原型链笔记

    在实际编程中常常需要面向对象编程,如果你熟悉c++你就知道可以写一个类,对象可以继承类的属性和功能。其实javas...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

网友评论

      本文标题:javascript原型与原型链笔记

      本文链接:https://www.haomeiwen.com/subject/vxgrlxtx.html