[js学习笔记] 原型链理解
js中只有对象,包括对象,函数,常量等。
prototype
- 只有函数里有这个属性。
- 对象里可以设置这个属性,但是没这个属性的意义
- prototype指向一个对象,可以添加想要的方法。
- 该对象里有一个constructor属性,默认指向了这个函数。
proto
- 对象里有这个属性。
- 功能: 如果要一个对象的属性,会先在这个对象里查找,如果这个对象里没有这个属性,则会在这个对象里__proto__的对象里查找这个属性
- 如果这个对象本身还有一个 proto 属性,则会继续在
__proto__.__proto__
里找这个属性。 - 该属性无法在ie11以下,无法直接访问
new 对象
- new function 创建对象的时候,会首先创建一个空对象
- 传入这个fuction赋值给this对象
- 把该function里的prototype 赋值给这个对象的 __proto__属性。
- 所创建出来的对象,这是为什么创建出来的对象可以访问之前function里prototype设置属性
一些实例
proto
var a = {};
a.__proto__ = {
"show":function(){
document.write("show");
}
}
a.show()//show
function 里
function B(){ }
B.prototype.show1 = function(){
document.write("B:show1");
}
B.show = function(){
document.write("B:show");
}
new B().show1();// 对象只与方法里prototype 关联
new B().show();//B对象里直接设置的方法不会关联到方法里。
方法调用以及this理解
- this 其实就是调用方法 . 之前的对象。
- 如果使用call,apply方式调用,则this是用第一个参数赋的值。
function B(){ }
B.show = function(){
document.write(this);
} B.show();//打印结果为: function B
基础的东西都说完了,咱们来基于这些做一些拓展
继承封装
方式1
ext = function(child,parent)
{
var _proto = function(){};
_proto.prototype = parent.prototype;
child.prototype = new _proto();
child.prototype.constuctor = child;
child.super=parent;
}
Object.prototype.super = function(){};
方式2
ext = function(child,parent)
{
child.prototype.__proto__ = parent.prototype;//new _proto();
child.prototype.constuctor = child;
child.super=parent;
}
Object.prototype.super = function(){};
使用
//定义Person
function Person(name, age)
{
this.name = name;
this.age = age;
} Person.prototype.speak = function()
{
document.write("name = "+this.name + "<br/>");
} //定义学生,继承了Person
function Student(name,age)
{
Student.super.call(this,name,age);
this.score = 90;
}
ext(Student,Person) Student.prototype.show = function()
{
document.write("show name=" + this.name + ",score = "+this.score +"<br/>");
} //定义Academician 继承Student
function Academician(name, age){
Academician.super.call(this,name,age);
}
ext(Academician,Student); var academ = new Academician("狗蛋",20); academ.show();
academ.speak();
打印结果
show name=狗蛋,score = 90
name = 狗蛋
[js学习笔记] 原型链理解的更多相关文章
- 【学习笔记】深入理解js原型和闭包系列学习笔记——精华
深入理解js原型和闭包笔记: 1.“一切皆是对象”,对象是属性的集合. 丨 函数也是对象,但是使用typeof时为什么函数返回function而 丨 不是object呢,js为何要对函数做这样的区分 ...
- js原型链理解(2)--原型链继承
1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 一点感悟:《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
随机推荐
- 【Maven】解决linux下安装maven update-alternative --display mvn链接层数过多
问题描述: 今天首次在linux上安装配置maven,编辑/etc/profile 配置好环境变量之后 使用mvn -v 显示出mvn配置信息,此时以为可以顺利的构建maven项目. 结果中间构建时, ...
- Win7系统如何复制CMD命令提示符框中的内容
Win7系统如何复制CMD命令提示符框中的内容.. Win7系统如何复制CMD命令提示符框中的内容右键命令提示符窗口的标题栏,选择属性. 选择“编辑选项”里的“快速编辑模式”,并确定: 鼠标左键按下选 ...
- 更符合面向对象的数据库操作方式-OrmLite
1. jar包下载 下载地址:http://ormlite.com/releases/,一般用core和android包即可. 如果使用的是android studio,也可以直接通过module s ...
- Atomic类和CAS
说Atomic类之前,先聊一聊volatile. 对volatile的第一印象就是可见性.所谓可见性,就是一个线程对共享变量的修改,别的线程能够感知到. 但是对于原子性,volatile是不能保证的. ...
- Django项目之小博客
学习了几天Django,学着做了一个简易的小博客,主要用来练习Django基本的操作. 主要用到的命令和Django包.模块等: django.urls.url django.urls.import ...
- android monkey测试学习
前提是:有安卓环境,能用adb命令 一.Monkey 测试的目的? 该工具可用于测试稳定性. 开发人员结合monkey 打印的日志 和系统打印的日志,解决测试中出现的问题 二.Monkey 测试的特点 ...
- 极化码的matlab仿真(2)——编码
第二篇我们来介绍一下极化码的编码. 首先为了方便进行编码,我们需要进行数组的定义 signal = randi([0,1],1,ST); %信息位比特,随机二进制数 frozen = zeros(1, ...
- Visual Studio2017数据库架构比较
一.前言 开发的时候在测试服务器上和线网服务器上面都有我们的数据库,当我们在线网上面修改或者新增一些字段后,线网的数据库也需要更新,这个时候根据表的修改记录,然后在线网上面一个一个增加修改很浪费效率而 ...
- javascript中this的指向
作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...
- Windows10 VS2015下分别编译libevent 32位和64位库
Libevnt 在Windows10 VS2015下分别编译32位和64位库 直接上王道 libevent代码地址: https://github.com/libevent/libevent git ...