JavaScript 原型理解

创建一个对象可以通过对象字面量的方式:
var stu = {
    name:"张三",
    sayname:function(){
        console.log(this.name);
    }

可是,我们要创建多个stu对象总不能把上面代码重复写很多次吧?

我们可以使用最简单的工厂函数,返回一个对象:

function stuFactory (name){
    return {
        name:name,
        sayname:function(){
            console.log(this.name);
        }
    }
}
//这样生成实例对象
var stu1 = stuFactory("赵四");
var stu2 = stuFactory("王五");

但是这样有一个问题,即谁创建了这两个对象?

更优雅的方式:构造函数

所谓构造函数,需通过 new Constructor() 的方式创建对象。



 function stuMaker(){
            this.name = name,
            this.sayname = function(){
                console.log(this.name);
            }
        }
 var stu3 = new stuMaker("尼古拉斯");
 var stu4 = new stuMaker("尼古拉斯-赵四");

这个 new 关键字发生了什么?

function stuMaker(){
            //创建一个临时对象
            var instacne = {},
            //实例绑定到this
            this = instacne,
            this.name = name,
            this.sayname = function(){
                console.log(this.name);
            }
            //返回this
            return this;
        }

总结就是:

  1. 创建一个临时对象保存实例
  2. 将 this 指向该临时对象
  3. 返回这个对象

但是,这样还不是很优雅,假如这个学生对象有共有属性,每次创建一个实例对象,就会把这个共有属性创建一次,不合理,JavaScript 为了解决这个问题,规定了每个函数都有一个 Prototype 属性,这个属性可以干嘛呢?

这个属性可以指向一个 constructor 的对象,这个对象有个属性 constructor 指向该构造函数



  function 构造函数(){
           prototype:constructor //简单写就是这样一个对象:constructor{constructor::构造函数}
        }

我们通过该构造函数创建的实例对象有个__proto__属性指向一个对象,这个对象就是上面:

构造函数prototype 所指的对象

简言之:

构造函数.prototype === 实例对象.__proto__;

这么做有什么意义呢?

构造函数的 prototype 把共有属性预定好,然后再创建对象的时候,顺手让实例对象的proto属性指向这个对象,好处就是实例对象可以通过proto知道自己共有属性有哪些。

总感觉还是没能彻底理解js 的原型 ,解释起来非常费劲,暂且就这样吧,有了更加通俗易懂的方式,再来填坑。

原文地址:https://www.cnblogs.com/guotaodexiaoheiban/p/8971296.html

时间: 2024-11-01 20:01:48

JavaScript 原型理解的相关文章

JavaScript原型理解

这东西我还不是很理解,但是把自己实践的过程记录下来,希望积累到一定程度,能自然而而然的理解了.很多东西我是这样慢慢理解的,明白为啥是那样子,真的很神奇哦.少说废话,开始吧. function Person(){ this.age="aaa"; } var p1=new Person(); p1.age;//aaa 从图片中我们可以看出p1.__proto__和Person.prototype中是不包括age属性的p1.__proto__ ==Person.prototype 我再来创建

理解JavaScript原型

Javascript原型总会给人产生一些困惑,无论是经验丰富的专家,还是作者自己也时常表现出对这个概念某些有限的理解,我认为这样的困惑在我们一开始接触原型时就已经产生了,它们常常和new.constructor相关,特别是函数(function)的原型(prototype)属性(property).事实上,原型是一种非常简单的概念.为了更好的理解它,我们应该首先记住这个原则,那就是忘记我们已经学到的关于构造原型(construtor prototypes)的认识. 什么是原型? 原型是一个对象,

深入理解JavaScript原型链

前言 最近碰到一个题,大家可以试下. Object.prototype.a = function() { console.log("aaa "+this.name); }; Function.prototype.b = function() { console.log("bbb "+this.name); }; function Person(name) { this.name = name; } var person = new Person("Chin

深入理解javascript原型和闭包(15)——闭包

http://www.cnblogs.com/wangfupeng1988/p/3994065.html 深入理解javascript原型和闭包(15)——闭包

深入理解javascript原型和闭包(转)

深入理解javascript原型和闭包(完结) 说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分——原型和闭包,当然,肯定少不了原型链和作用域链.帮你揭开javascript最神秘的面纱. 为什么要偏偏要讲这两个知识点? 这是我在这么多年学习javascript的经历中,认为最难理解.最常犯错的地方,学习这两个知识点,会让你对javascript有更深层次的理解,至少理解了原型和作用域,就

深入理解javascript原型和闭包(3)——prototype原型

转载于http://www.cnblogs.com/wangfupeng1988/p/3978131.html 既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解javascript原型和闭包(1)——一切都是对象)中说道,函数也是一种对象.他也是属性的集合,你也可以对函数进行自定义属性. 不用等咱们去试验,javascript自己就先做了表率,人

理解javascript原型和作用域系列(3)——prototype原型

既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(理解javascript原型和作用域系列(1)——一切都是对象)中说道,函数也是一种对象.他也是属性的集合,你也可以对函数进行自定义属性. 不用等咱们去试验,javascript自己就先做了表率,人家就默认的给函数一个属性——prototype.对,每个函数都有一个属性叫做prototype. 这个prot

【转】深入理解javascript原型和闭包(完结)

直接传送门-------------------->>>>>>>> 深入理解javascript原型和闭包(完结)

理解javascript原型和作用域系列(7)——原型的灵活性

在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼(中秋节刚过完).压个啥样,就得是个啥样,不能随便动,动一动就坏了. 而在javascript中,就没有模子了,月饼被换成了面团,你可以捏成自己想要的样子. 首先,对象属性可以随时改动. 对象或者函数,刚开始new出来之后,可能啥属性都没有.但是你可以这会儿加一个,过一会儿在加两个,非常灵活. 在jQuery的源码中,对象被创建时什么属性都没有,都是代码一步一步执行时,一个一个加上的. 其次,如果继承