谈谈我认识的js原型
众所周知,JavaScript中是没有传统类的概念的,js通过原型链的方式实现继承。原型是js学习中的一大重点知识,在ES6出来之前,因为js不像php、java一样拥有类的写法,所以继承方式也就不像php、java一样通过关键字extends实现子类继承父类的方式,但是js有它独特的实现继承的方式,这种方式有:prototype、原型冒充、复制继承。
1、prototype
js中每个函数就是一个对象,每个对象都有自己的prototype属性,通过这个属性,可以指定某一类对象的原型
function Person(name,age,sex){
this.name = name || " ", //设置默认值,如果传入实参,this.name的值就等于实参的值,否则this.name的值默认为 " "
this.age = age || 24,
this.sex = "男" || sex,
this.say = function (){
console.log("我会说话");
},
this.smile = function(){
console.log("笑");
},
this.walk = function(){
console.log("走路");
}
};
function Monkey(){
this.type = "monkey";
};
var oop = new Person();
Monkey.prototype = oop;
var oom = new Monkey();
//执行oom.say()输出 我会说话
oom.say();
oom对象并没有say()方法,为什么程序没有保存而且控制台还输出了 “我会说话”。因为oom对象的构造函数的prototype属性指向oop对象,表明由Monkey构造函数创建出来的一类对象,他们都具有共同的原型:oop对象。所以oom对象调用say()方法中,程序会默认先在oom对象中查找,如果没有找到这个属性,程序会沿着原型链往上寻找该属性。
需要注意的是,js中new 构造函数()这个过程发生了如下的操作:
a、创建空对象 { };
b、this指向空对象{ };
c、执行构造函数的函数体。
在过程c中,如果你熟悉js的为对象添加属性的方式(对象名 . 属性),你会发现,过程c其实就是给这个空对象添加属性和方法的过程。
构造函数名 。prototype = 对象 ,这个对象也可以是自定义的对象,在这个对象中定义了需要用到的方法和值。如下例子所示:
function op(){
a = 3;
};
var obj = {
para : 1,
say : function(){console.log("obj");}
};
//指定构造函数op的原型是obj对象;
op.prototype = obj;
//由构造函数op创建的oop对象能够调用对象obj中的方法
var oop = new op();
oop.say();
2、原型冒充
原型冒充的原理是通过call()与apply()函数改变当前对象的this的执行上下文。这话说的有点抽象,下面直接用例子解释:
//函数
function increase(a , b){
return a+b;
}; function reduce(a , b){
return a-b;
}
increase . call(reduce,1,2); //输出3 reduce . call(increase,1,2); //输出-1 解释 :对象A . call(对象B , 参数1 , 参数2 , ......参数n)中执行了这样的操作: a、修改对象A的this的指向,使其暂时指向对象B,参数1与参数2是传入对象B的实参。 b、执行调用call()方法的对象。 所以increase . call(reduce,1,2); 这一句相当于increase中this指向reduce,然后执行increase(1,2),所以最终结果输出3。 //对象 function person(name){
this.name = name;
this.say = function(){
console.log(this.name);
}
};
var op = new person("张三");
op.say(); function lisi(name){
this.name = name;
};
var ls = new lisi("李四");
op.say.call(ls);//this指向ls :op.say(){ console.log(ls.name) },执行op.say()方法,输出 李四
op.say.call(ls)这句代码先是将say()函数体内的this指向ls,然后执行say()方法。op.say();这一步在正常情况下输出的结果应该是"张三",但是为什么却是“李四”了呢?原因是op.say.call(ls)这句代码将say()函数在程序解析到这句代码的位置时,this暂时指向对象ls,所以在op对象的say()体内的输出语句console.log(this.name)实际上是console.log(ls.name);
3、复制继承
复制继承的原理是,将对象以参数的形式传递到构造函数中,在构造函数中通过对象属性的方式(Objname . propertyname或者Objname[propername])访问盖对象的属性值,将值赋予当前对象的属性。
function Person(){
this.name = "张三";
this.age = 24;
this.sex = "男"
}
function children(per){
this.name = per.name;
this.age = per.age;
this.sex = per.sex;
}
var op = new Person();
//向children构造函数中传入op对象,在children函数内完成值的复制
var chi = new children(op);
console.log(chi.age);
以上均是js原型继承的实现方式,在js这个海洋中,因为知识有限,所以博客还存在很多不足之处,希望更够跟大家多多交流学习。
谈谈我认识的js原型的更多相关文章
- JS原型链
JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...
- 深入分析JS原型链以及为什么不能在原型链上使用对象
在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- js原型
1.js基本类型和对象类型 js的简单类型包括数字(其中NaN为数字类型).字符串(类似'A'为字符,js没字符类型).布尔值.null值和undefined值.其他所有的值都是对象.数字.字符串和布 ...
- js原型链与继承(初体验)
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
- js原型解析
我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node. ...
- 深入理解JS原型链与继承
我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...
- 学习zepto.js(原型方法)
学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...
随机推荐
- ShardingJdbc-分表;分库;分库分表;读写分离;一主多从+分表;一主多从+分库分表;公共表;数据脱敏;分布式事务
目录 创建项目 分表 导包 表结构 Yml 分库 Yml Java 分库分表 数据库 Yml 读写分离 数据库 Yml 其他 只请求主库 读写分离判断逻辑代码 一主多从+分表 Yml 一主多从+分库分 ...
- LGP1397题解
并不是那么的有意思呢 首先,我们可以将题目给出的地推式看做一个一次函数 \(k * x+b\),来思考一个问题,如果给出两个一次函数 \(F(x)\) 和 \(G(x)\),那么 \(F(G(x))\ ...
- nexus3上传第三方jar包
1.新建第三方仓库,名字叫3rd_part 2.添加到maven-public组中 3.修改maven的setting.xml 4.执行命令 mvn deploy:deploy-file -Dgrou ...
- web服务器-nginx虚拟主机
web服务器-nginx虚拟主机 一 虚拟主机介绍 就是把一台物理服务器划分成多个虚拟的服务器, 每一个虚拟主机都可以有独立的域名和独立的目录,同时发布俩个网站. 二. 基于IP的虚拟主机 应用场景: ...
- Django基础必会
Django基础必会 Django项目目录 mysite -mysite -__init__.py -urls.py(函数和函数的对应关系) -settings.py(Django项目的配置信息) - ...
- linux 查看命令
linux查找命令 ls查看文件信息 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限(包括目录.文件夹.文件权限)查看目录信息等等 常用参数搭 ...
- 74CMS 3.4 反射型XSS漏洞
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 2.因为74CMS3.4源代码编辑使用GBK编 ...
- 突发!Gitee 图床,废了!
大家好,我是鱼皮,这两天又发生了一件挺意外的事情:Gitee 的图床废了! 图床:指储存图片的服务器,便于在网上展示图片 昨天晚上,星球里不止一位小伙伴发帖子表示自己网站.文章中的图片竟然全部变成了 ...
- docker知识点扫盲
最近给部门同事培训docker相关的东西,把我的培训内容总结下,发到博客园上,和大家一起分享.我的培训思路是这样的 首先讲解docker的安装.然后讲下docker的基本的原理,最后讲下docker的 ...
- Mybatis配置错误:java.lang.ExceptionInInitializerError
情况一:配置文件,无法被导出或者生效 修改前: 修改后: 究其原因,这是由于Maven的约定大于配置,导致我们写的配置文件,无法被导出或者生效的问题,解决方案: 在pom.xml文件中配置导出非res ...