1、定义:我们创建的函数都有一个prototype(原型)属性,该属性是一个对象,
原型模式声明中多了两个属性(自动生成)。
构造函数:
function Box(name,age){
this.name = namw;//实例属性
this.age = age; //实例属性
this.run = function (){ //实例方法
return this.name + this.age + "运行中..."
}
}
var box1 = new Box("张三",25);
var box2 = new Box("张三",25);
console.log(box1.run == prp2.run);//false (实例方法的引用地址具有唯一性,不可能一样)
原型:即共享,共享即引用地址一致
function Prp() {}//字面量方式创建更有封装效果
Prp.prototype.name = "原型"; //原型属性
Prp.prototype.address = "云南";//原型属性
Prp.prototype.run = function () {//原型方法
return "原型名:" + this.name + "原型地址:" + this.address
}
var prp1 = new Prp();//实例化
var prp2 = new Prp();
console.log(prp1.run == prp2.run);//true(原型方法的引用地址保持一致(区别实例方法))
alert(prp1.__proto__);//__proto__这个属性是一个指针,指向prototype原型对象,可获取但是无法获取具体信息
alert(prp1.constructor);//构造属性(用于被原型指针定位并得到构造函数本身,即实例对象对应的原型对象)
注:__proto__和constructor可辅助理解后台工作原理,不用掌握
2、判断一个对象是否指向该构造函数的原型对象:isPrototypeOf();
console.log(Prp.prototype.isPrototypeOf(prp1));//true 只要实例化对象就自动指向
3、原型模式的执行流程
1)先查找构造函数实例里的属性或方法,若有就返回
2)若构造函数实例里没有,则去他的原型对象找,有就返回。
3)对象实例可访问保存在原型中的值不能访问通过对象实例重写原型中的值
eg.
prp1.name="重庆";
console.log(prp1.name);//重庆(就近原则,这里是实例属性,并未修改原型属性)
console.log(prp2.name);//原型(原型里的值)
4)若要prp1也访问到原型里的值,只需将属性删除,即
delete prp1.name;//这里删除的是实例属性,不是原型属性
console.log(prp1.name);//原型中的name
Prp.prototype.name = "原型11";//覆盖原型中的属性
3、判断属性在原型里还是在函数的实例里:hasOwnProperty()
console.log(Prp.hasOwnProperty('name'));//true(判断实例中是否存在指定属性)
console.log(prp1.hasOwnProperty(name));//false
4、in操作符:不管属性在实例中还是原型中,in会在通过对象能访问给定属性时返回true,
**** 即判断实例中或原型中是否存在属性。****
console.log('name' in prp2);//true(name属性可以访问)
5、判断原型中是否存在属性
function Prp() {
Prp.prototype.name = "原型";
Prp.prototype.address = "云南";
Prp.prototype.run = function () {
return "原型名:" + this.name + "原型地址:" + this.address
}
}
function isProperty(obj,property) {//判断原型中是否存在属性
return !obj.hasOwnProperty(property) && (property in obj);
}
var isprp1 = new Prp();
console.log(isProperty(isprp1,'name'));//true
console.log(isProperty(isprp1,'age'));//false
6、字面量方式创建原型
function Prp1(){};//字面量方式创建原型更有封装效果
Prp1.prototype={//相当于原型被重写了
name:"张三",
age:15,
address:"四川",
run: function f() {
return "原型名:" + this.name + "原型地址:" + this.address
}
}
7、字面量方式创建原型对象:constructor不指向实例,指向Object
var prp0 = new Prp1();
console.log(prp0 instanceof Prp1);//true
console.log(prp0 instanceof Object);//true
console.log(prp0.constructor == Prp1);//false
console.log(prp0.constructor == Object);//true
/*字面量方式指向实例:*/
Prp1.prototype = {
constructor: Prp1
}
8、****解决穿参合引用共享的问题:不共享的使用构造函数,共享的使用原型模式*****
function Gz(name, age) {//构造函数(不共享,保持独立)
this.name = name;
this.age = age;
this.family = ['哥哥', '姐姐', '妹妹', '弟弟'];
}
Gz.prototype = {//原型模式,共享
constructor:Gz,//指向
run:function () {
return this.name+','+this.age+','+this.family
}
}
***动态原型模式***
function Gzhs(name, age) {//构造函数(不共享)
this.name = name;
this.age = age;
this.family = ['哥哥', '姐姐', '妹妹', '弟弟'];
if (typeof this.run != "function") {
//判断后仅在第一次调用时初始化,没必要实例化一次就初始化一次,且实现了封装和共享,但是属性独立
Gzhs.prototype.run = function () {
return this.name + ',' + this.age + ',' + this.family
}
}
}
var hs1 = new Gzhs("张三",50);//实例化
console.log(hs1.run());//张三,50,哥哥,姐姐,妹妹,弟弟
9、寄生构造函数=工厂模式+构造函数 (通用模式)
function Box(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.run = function(){
return this.name +this.age + "运行中..."
}
return obj
}
var box1 = new Box("张三",50);//实例化
console.log(box1.run());
- JS基础——原型和原型链
1.相关知识点 (1)构造函数 (函数名首字母大写表示构造函数) function Foo(name,age){ this.name = name; this.age = age; this.cla ...
- JS基础-原型链和继承
创建对象的方法 字面量创建 构造函数创建 Object.create() var o1 = {name: 'value'}; var o2 = new Object({name: 'value'}); ...
- JS基础-该如何理解原型、原型链?
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
- 基础1:JS的原型和原型链究竟
JS的原型和原型链究竟是什么? 1. 从JS创建一个对象开始说起: 1.1 工厂模式创建对象 (缺点是无法知道创建出来的对象是一个什么类型的对象) function createPerson(name ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
- 【 js 基础 】Javascript “继承”
是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式. ...
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- js基础进阶--关于Array.prototype.slice.call(arguments) 的思考
欢迎访问我的个人博客:http://www.xiaolongwu.cn Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出 ...
- js基础--javaScript数据类型你都弄明白了吗?绝对干货
欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...
随机推荐
- JS函数式编程 - 概念
最近在看Typescript,顺便看了一些函数式编程,然后半个国庆假期就没有了.做个笔记,分几个部分写吧. 最开始接触函数式编程的时候,第一个接触的概念就是高阶函数,和柯里化.咋一看,这不就是长期用来 ...
- vue路由history模式刷新页面出现404问题
vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...
- JS 鼠标键盘HTML事件
- Vijos1775 CodeVS1174 NOIP2009 靶形数独
靶形数独 描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z博士请教, Z 博士拿出了他最近发 ...
- LintCode A+B问题
给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符. 说明 a和b都是 32位 整数么? 是的 我可以使用位运算符么? 当然可以 样例 如果 a=1 并且 b=2,返回3 1.(忽略进位 ...
- LintCode_67 二叉树中序遍历
题目 给出一棵二叉树,返回其中序遍历 C++ 非递归 vector<int> inorderTraversal(TreeNode *root) { // write your code h ...
- 【JZOJ4929】【NOIP2017提高组模拟12.18】B
题目描述 在两个n*m的网格上染色,每个网格中被染色的格子必须是一个四联通块(没有任何格子被染色也可以),四联通块是指所有染了色的格子可以通过网格的边联通,现在给出哪些格子在两个网格上都被染色了,保证 ...
- C++ 引用#include<math.h> 找不到动态库
问题: 使用g++ 编译C++文件报错了,无法识别abs,可是我这文件中已经添加了#include<math.h>? 于是在指令中加入-lm g++ main.cpp AStar.cpp ...
- Handler, AsyncTask用法简单示例
package com.jim.testapp; import android.app.Activity; import android.os.AsyncTask; import android.os ...
- sqlplus连接数据库报错SP2-0642: SQL*Plus internal error state 2130, context 0:0:0解决
sqlplus连接数据库报错SP2-0642: SQL*Plus internal error state 2130, context 0:0:0解决 sqlplus 连接数据库报错SP2-0642: ...