<!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. JS数组去重精简版

    看了很多人写的好几个去重方法,我在这里精简组合下,适用于已排序与未排序的数组. 废话不多说,上代码. <!DOCTYPE html> <html> <head> & ...

  2. wcf双工通信

    一直以为感觉双工没弄懂,着实觉得很惆怅,在网上了解下双工的一些特点,直接上代码,以便以后项目中用的着: service层: 定义一个IDuplexHello服务接口 [ServiceContract( ...

  3. Java怎么把一个.log文件，以text文件方式打开，显示在桌面

    总要有一个开始吧 群里面有一个哥们,问这个问题,索性记录下来, quextion: Java怎么把一个.log文件,以text文件方式打开,显示在桌面 anwser: 这里注意一个问题:拼接路径的时候 ...

  4. [软件工程基础]2017.11.05 第九次 Scrum 会议

    具体事项 项目交接燃尽图 每人工作内容 成员 已完成的工作 计划完成的工作 工作中遇到的困难 游心 #10 搭建可用的开发测试环境:#9 阅读分析 PhyLab 后端代码与文档:#8 掌握 Larav ...

  5. codeforces540E-树状数组求逆序对

    1-1e9的数据范围 但有1e5个区间 所以可以考虑把没有涉及到的区间缩成一个点 然后树状数组求逆序对 #include<bits/stdc++.h> #define inf 0x3f3f ...

  6. maven settings.xml linux

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  7. 【手撸一个ORM】第一步、实体约定和描述

    一.约定 数据实体必须实现 IEntity 接口,该接口定义了一个int类型的Id属性,既每个实体必须有一个名称为Id的自增主键. 若数据表的主键列名称不是Id,可以通过 [MyKey("主 ...

  8. java Integer

    Java 中的数据类型分为基本数据类型和引用数据类型 int是基本数据类型,Integer是引用数据类型: Ingeter是int的包装类,int的初值为0,Ingeter的初值为null. 初始化 ...

  9. 《javascript设计模式》笔记之第九章：组合模式

    之前一直都是按照书的结构顺序做总结,觉得好像不是很好,现在试着完全按照自己的理解做总结.例子还是书上的例子. 一:组合模式的作用: 在web开发中,主要用于创建嵌套的html结点,使得我们方便的把各种 ...

  10. where whereis locate find 的用法

    1.where :where ifconfig.用来搜索命令,显示命令是否存在以及路径在哪 2.whereis:whereis vim .用来搜索程序名,而且只搜索二进制文件(参数-b).man说明文 ...