原型与原型继承demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">hello world</div>
<script>
function Elem(idName) {
this.elem = document.getElementById(idName);
}
Elem.prototype.html = function (val) {
let elem = this.elem;
if (val) {
elem.innerHTML = val;
return this; // 可以链式操作
} else {
return elem.innerHTML;
}
}
Elem.prototype.on = function (type, callback) {
let elem = this.elem;
if (type) {
elem.addEventListener(type, callback);
return this;
}
}
let div = new Elem('container');
console.log(div.elem); // 获取当前元素
console.log(div.html()); // 获取当前元素内容
// div.html('你好');
// div.on('click', function () {
// alert('你好');
// })
// 链式操作
div.html('你好').on('click', function () {
alert('你好');
})
</script>
</body>
</html>
原型与原型继承demo的更多相关文章
- 深入理解JS原型链与继承
我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...
- js原型链与继承（初体验）
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...
- 对于js原型和原型链继承的简单理解（第一种，原型链继承）
原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解.来判断被面试者对js的熟悉程度. 原型的定义 Js所有的函数都有一个prototype属性,这个属性引 ...
- JavaScript原型链与继承
最近学习了<Javascript高级程序设计>面向对象部分,结合书中的例子总结一下原型链和继承部分的内容. 创建对象 在Js当中没有类这个概念,当我们想要创建具有相同属性的对象的时候,有如 ...
- js面向对象小结（工厂模式，构造函数，原型方法，继承）
最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下. 主要内容如下: 1.工厂模式 2.构造函数模式 3.原型模式 4.继承 一.工厂 ...
- 《JAVASCRIPT高级程序设计》根植于原型链的继承
继承是面向对象的语言中,一个最为津津乐道并乐此不疲的话题之一.JAVASCRIPT中的继承,主要是依靠原型链来实现的.上一篇文章介绍过,JAVASCRIPT中,每一个对象都有一个prototype属性 ...
- 对Javascript 类、原型链、继承的理解
一.序言 和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...
- js 原型，原型链，原型链继承浅析
对于网上的关于原型,原型链和原型链继承的晦涩语言说明就不累赘了,复制粘贴过来再解释一遍怕自己也整蒙了,本人最怕空气突然安静,四目对视,大眼对小眼,一脸懵逼. 我们先看下面
- 再谈javascriptjs原型与原型链及继承相关问题
什么是原型语言 只有对象,没有类;对象继承对象,而不是类继承类. “原型对象”是核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己创建时和运行时定义的属性,而且可以 ...
- JavaScript原型链及继承
在JavaScript中,所有的东西都是对象,但是JavaScript中的面向对象并不是面向类,而是面向原型的,这是与C++.Java等面向对象语言的区别,比较容易混淆,因此把我自己学习的过程记录下来 ...
随机推荐
- SpringMVC 的数据绑定
1.数据自动绑定 SpringMVC 框架支持不需要任何数据绑定的注解直接将表单参数绑定到我们的执行方法的参数上. 表单参数:包括 POST 以及 GET 发送过来的参数 就是以内容类型为:encty ...
- video，audio用法小例子
用此小程序设计播放/暂停,放大缩小 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...
- Posture Energy——姿态的能量
人的生活是套路化的,人活得越久,被套路化的概率就越大.普通百姓的生活都如同一个模板刻出来的. 一旦生活微调,我们会突然发现原来几十年的认知有问题,如同重获新生的感觉.譬如:早起,当我们每天早起一小时, ...
- python大战机器学习——人工神经网络
人工神经网络是有一系列简单的单元相互紧密联系构成的,每个单元有一定数量的实数输入和唯一的实数输出.神经网络的一个重要的用途就是接受和处理传感器产生的复杂的输入并进行自适应性的学习,是一种模式匹配算法, ...
- java.sql.SQLException: No suitable driver found for jdbc:hive://localhost:10000/default
error: java.sql.SQLException: No suitable driver found for jdbc:hive://localhost:10000/default at ja ...
- 运行node提示：events.js:160 throw er; // Unhandled 'error' event
运行node时遇到下述提示: events.js:160 throw er; // Unhandled 'error' event或者events.js:160 throw er; // ...
- Solr创建索引问题
问题描述: 8月 19, 上午10点27:58.219 WARN com.ngdata.hbaseindexer.supervisor.IndexerSupervisor No indexer pro ...
- PHP函数生成随机数
通常情况下,当我们要生成一个随机字符串时,总是先创建一个字符池,然后用一个循环和mt_rand()或rand()生成php随机数,从字符池中随机选取字符,最后拼凑出需要的长度,代码如下: <?p ...
- android模拟器创建时的PANIC: Could not open:错误的解决
创建AVD之后,在启动时报如下错误,解决方法如下: 在环境变量中创建ANDROID_SDK_HOME=D:\Program Files (x86)\Android\android-sdk,后面的当然是 ...
- vconsole移动端调试技巧（禁止webviuew,inspect等）
如果由于某种原因(天朝FQ),不能支持google 的 inspect 调试 或者再想在某个APP里面调试你的页面,但是没有打开APP的webview ,也不能授权调试 在或者,Fider 可以拦截 ...