原型规则

所有的引用类型（数组、对象、函数），都具有对象特征，即可自由扩展属性；

var arr = []; arr.a =1;

所有的引用类型都有对象的特性，即可自由扩展
所有的引用类型都有一个_proto_属性（隐式原型），属性的值是一个普通对象
所有函数，都具有一个prototype（显示原型），属性值也是一个普通原型
所有的引用类型（数组、对象、函数），其隐式原型指向其构造函数的显式原型；（obj.proto === Object.prototype）
当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么回去它的_proto_（即它的构造函数的prototype）中去寻找

原型对象

prototype 在js中，函数对象其中一个属性：原型对象prototype。普通对象没有prototype属性，但有_proto_属性。原型的作用就是给这个类的每一个对象都添加一个统一的方法，在原型中定义的方法和属性都是被所以实例对象所共享。

var person = function(name){this.name = name
};
person.prototype.getName=function(){//通过person.prototype设置函数对象属性return this.name;
}
var crazy= new person(‘crazyLee’);
crazy.getName(); //crazyLee//crazy继承上属性

原型链

当试图得到一个对象f的某个属性时，如果这个对象本身没有这个属性，那么会去它的_proto_（即它的构造函数的prototype）obj._proto_中去寻找；当obj._proto也没有时，便会在obj._proto.proto（即obj的构造函数的prototype的构造函数的prototype）中寻找

设计模式

工厂模式

在函数内创建一个对象，给对象赋予属性及方法再将对象返回

function Person() {var People = new Object();People.name = 'CrazyLee';People.age = '25';People.sex = function(){return 'boy';};return People;
}var a = Person();
console.log(a.name);//CrazyLee
console.log(a.sex());//boy

构造函数模式

无需在函数内部重新创建对象，而是用this指代

function Person() {this.name = 'CrazyLee';this.age = '25';this.sex = function(){return 'boy'};}var a = new Person();
console.log(a.name);//CrazyLee
console.log(a.sex());//boy

原型模式

函数中不对属性进行定义，利用prototype属性对属性进行定义，可以让所有对象实例共享它所包含的属性及方法

function Parent() {Parent.prototype.name = 'carzy';Parent.prototype.age = '24';Parent.prototype.sex = function() {&emsp;var s="女";&emsp;&emsp;&emsp; console.log(s);}
}var  x =new  Parent();
console.log(x.name);      //crazy
console.log(x.sex());       //女

混合模式

原型模式+构造函数模式。这种模式中，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性

function Parent(){  this.name="CrazyLee";  this.age=24;
};
Parent.prototype.sayname=function(){  return this.name;
};var x =new Parent();
console.log(x.sayname());   //Crazy&emsp;&emsp;

动态原型模式

将所有信息封装在了构造函数中，而通过构造函数中初始化原型，这个可以通过判断该方法是否有效而选择是否需要初始化原型

function Parent(){  this.name="CrazyLee";  this.age=24;  if(typeof Parent._sayname=="undefined"){     Parent.prototype.sayname=function(){  return this.name;  }  Parent._sayname=true;  }
};   var x =new Parent();
console.log(x.sayname());

参考：《原型设计模式以及JavaScript中的原型规则》

ps：文末附上汇总文章链接《一名【合格】前端工程师的自检清单【自检ing】》

理解原型设计模式以及JavaScript中的原型规则相关推荐

js-- 原型设计模式以及JavaScript中的原型规则
原型规则原型规则所有的引用类型(数组.对象.函数),都具有对象特征,即可自由扩展属性: var arr = []; arr.a =1; 复制代码所有的引用类型,都有一个_proto_ 属性(隐式 ...
javascript原型_在JavaScript中冻结原型时会发生什么
javascript原型 Have you wondered what happens when you freeze the prototype of an object? Let's find o ...
理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
理解JavaScript中的原型与原型链
理解JavaScript中的原型与原型链原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...
js实现html模板继承,理解JavaScript中的原型和继承
本文主要讲了原型如何在JavaScript中工作,以及如何通过[Prototype]所有对象共享的隐藏属性链接对象属性和方法:以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值. 介绍 ...
JavaScript中的原型(prototype)与继承
在JavaScript中,原型是用来模仿其他「类」语言继承机制的基础.原型并不复杂,原型只是一个对象. 一.原型对象 1.1 什么是原型对象每当我们创建了一个函数后,这个函数就拥有了一个protot ...
JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
JavaScript中的原型继承原理
在JavaScript当中,对象A如果要继承对象B的属性和方法,那么只要将对象B放到对象A的原型链上即可.而某个对象的原型链,就是由该对象开始,通过__proto__属性连接起来的一串对象.__pro ...
JavaScript中的原型和原型链
前言 JS中的原型和原型链应该算是比较经典的话题了,很多人只了解了其表面(在创建构造函数的时候使用prototype属性声明公共方法),但是在面试中也会经常问到其中的原理,这时候就答不出来了(比如我) ...

理解原型设计模式以及JavaScript中的原型规则

原型规则

原型规则

原型对象

原型链

设计模式

工厂模式

构造函数模式

原型模式

混合模式

动态原型模式

理解原型设计模式以及JavaScript中的原型规则相关推荐

最新文章

热门文章