<!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的更多相关文章

  1. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

  2. js原型链与继承（初体验）

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...

  3. 对于js原型和原型链继承的简单理解（第一种，原型链继承）

    原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解.来判断被面试者对js的熟悉程度. 原型的定义 Js所有的函数都有一个prototype属性,这个属性引 ...

  4. JavaScript原型链与继承

    最近学习了<Javascript高级程序设计>面向对象部分,结合书中的例子总结一下原型链和继承部分的内容. 创建对象 在Js当中没有类这个概念,当我们想要创建具有相同属性的对象的时候,有如 ...

  5. js面向对象小结（工厂模式，构造函数，原型方法，继承）

    最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下. 主要内容如下: 1.工厂模式 2.构造函数模式 3.原型模式 4.继承 一.工厂 ...

  6. 《JAVASCRIPT高级程序设计》根植于原型链的继承

    继承是面向对象的语言中,一个最为津津乐道并乐此不疲的话题之一.JAVASCRIPT中的继承,主要是依靠原型链来实现的.上一篇文章介绍过,JAVASCRIPT中,每一个对象都有一个prototype属性 ...

  7. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

  8. js 原型，原型链，原型链继承浅析

    对于网上的关于原型,原型链和原型链继承的晦涩语言说明就不累赘了,复制粘贴过来再解释一遍怕自己也整蒙了,本人最怕空气突然安静,四目对视,大眼对小眼,一脸懵逼. 我们先看下面

  9. 再谈javascriptjs原型与原型链及继承相关问题

    什么是原型语言 只有对象,没有类;对象继承对象,而不是类继承类. “原型对象”是核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己创建时和运行时定义的属性,而且可以 ...

  10. JavaScript原型链及继承

    在JavaScript中,所有的东西都是对象,但是JavaScript中的面向对象并不是面向类,而是面向原型的,这是与C++.Java等面向对象语言的区别,比较容易混淆,因此把我自己学习的过程记录下来 ...

随机推荐

  1. c#根据身份证获取身份证信息

    /// <summary> /// 根据身份证获取身份证信息 /// 18位身份证 /// 0地区代码(1~6位,其中1.2位数为各省级政府的代码,3.4位数为地.市级政府的代码,5.6位 ...

  2. nginx反向代理解决跨域问题，使本地调试更方便

    我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...

  3. SpringMVC之WebMVC介绍

    一.MVC是什么 二.常用的MVC框架 三.MVC模式的优缺点 四.SpringMVC简介

  4. JS高级学习历程-10

    [面向对象] 面向对象的三大特性:封装.继承.多态 封装:在“类”里边有关键字public.protected.private 对成员进行声明,这样每个成员的访问都会受到不同关键字的限制. 继承:在p ...

  5. VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  6. FusionCharts图表控件中文版使用手册

    三要素:swf.data.xml.承载图表的载体 1.Swf: 按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg:若你想生成一张二维柱状图,那么在你的工程里就必须包含Column2D. ...

  7. JS——三种嵌入页面的方式

    一 行间事件 二 页面script标签嵌入 三 外部引入 <!DOCTYPE html> <html lang="en"> <head> < ...

  8. HDU 5875 H - Function 用单调栈水过了

    http://acm.hdu.edu.cn/showproblem.php?pid=5875 单调栈,预处理to[i]表示第一个比a[i]小的数字,一直跳就可以. 这题是数据水而已. 这里学习下单调栈 ...

  9. Linux netstat命令详解和使用例子（显示各种网络相关信息）

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  10. 【踩坑】springMVC 接收String参数没有判断为空

    今天在调试iReview项目的接口时,发现新增词条和新增库的时候,某些字段即使留空POST到后台时也能当做不为空. 经过排查,发现后台是使用 String 变量名 == null 这样的语句去判断变量 ...