对象及原型

最新推荐文章于 2022-11-20 12:29:12 发布
最新推荐文章于 2022-11-20 12:29:12 发布
阅读量2.3k 收藏 2
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48211419/article/details/111196343
版权

目录

创建对象

字面量 创建对象

var obj ={
	key:value
}

new Object() 创建对象

var obj1 = new Object()

获取、设置对象属性

obj.key 获取/设置obj的key属性的值value

obj1.key / obj1.key=value

obj[‘key’] 获取/设置obj的key属性的值value

obj['key'] / obj['key']=value

key in obj 判断obj中是否有属性key

key in obj

delete obj.key 删除obj的key属性

delete obj.key

批量创建对象方法

工厂模式

//优点  生成独立的新对象
//缺点  代码重复  没有从属性
function fun(value1, value2){
	var obj ={
		'key1':value1,
		'key2':value2
	}
	return obj
}
var a = fun(实参1, 实参2)

原型模式 函数的原型对象 prototype属性

//优点  生成一个对象  没有重复  有从属
//缺点  可变的不可变
fun.prototype={
	key1:value1,
	key2:value2
}

构造函数

//首字母大写
//优点  创建不同对象  有从属关系
//缺点  代码重复
function App(value1, value2){
	this.key1=valve1,
	this.key2=value2
}
var app = new App(实参1, 实参2)

构造+原型 组合模式

//不重复  可改变  有从属
function App(value1, value2){  //可变
	this.key1=valve1,
	this.key2=value2
}
App.prototype={  //不可变
	key3:function(){},
	key4:value4
}
var app = new App(实参1, 实参2)

全局函数调用

function a(){  }
a() 或  window.a()

this指向

纯粹函数中的this        指向window
对象中的函数的this      指向上层对象
事件中的this            指向事件触发元素
构造函数中的this        指向实例化的对象

//改变this指向的方法
call(obj, 参数1, 参数2) //","隔开
apply(obj, [参数1, 参数2]) //"[]"包裹
bind(obj, 参数1, 参数2)() 或 bind(obj)(参数1, 参数2) //","隔开    参数写在前/后"()"中  需要调用

原型

每一个普通函数都有一个prototype属性,它指向函数的原型对象
原型对象有一个constructor属性,指向它的构造函数

原型链

每一个obj中都有`__proto__`属性,指向构造函数的原型对象,层层递进,最终指向null,这样形成的链式结构叫原型链

new操作符的实现

function fun(){
	this.key = value;
}
fun.prototype.btn = function(){}
var obj = {} //定义一个新对象
`obj.__proto__` = fun.prototype //函数的原型对象赋到obj的原型链上
fun.call(obj) //改变this指向到obj
var ol = obj //返回新对象

面向过程

需要关注每一步

面向对象编程(oop)

以对象的方式实现某个功能
优点：不需要关注如何实现，只关注如何使用
//案例1
<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		function Box(){
			this.div=document.createElement('div')
		}
        Box.prototype={
        	innerText:function(texts){
        		this.div.innerText=texts
        		return this
        	},
        	innerCss:function(obj){
        		for (var key in obj){
        			this.div.style[key]=obj[key]
        		}
        		return this
        	},
        	innerHtml:function(id){
        		var d = document.getElementById(id)
        		d.appendChild(this.div)
        		return this
        	}
        }
        var ass = new Box()
        ass.innerText('aaa').innerCss({'background':'red'}).innerHtml('box')
	</script>

面向对象

//特性：封装、继承、多态

原型链继承

//子类.prototype = new 父类
//优点:继承父类所有的方法和属性
//缺点:无法给父类构造函数传参
//父类
function Fu(value){
	this.keys = value
}
Fu.prototype.fun=function(a){console.log(a)}
//子类
function Zi(){}
Zi.prototype=new Fu('value')
//实例化Zi()
var zi = new Zi()
console.log(zi)

构造函数继承

//子类构造函数中 {父类.call(this)}
//优点：可以给父类构造函数传参
//缺点：不能继承父类的原型
//父类
function Fu(value1,value2){
	this.keys1 = value1,
	this.keys2 = value2
}
Fu.prototype.fun=function(a){console.log(a)}
//子类
function Zi(){Fu.call(this)}
//实例化Zi()
var zi = new Zi()
console.log(zi)

组合继承

//优点：即可给父类传参，也可继承父类的原型
//父类
function Fu(value1,value2){
	this.keys1 = value1,
	this.keys2 = value2
}
Fu.prototype.fun=function(a){console.log(a)}
//子类
function Zi(n,m){Fu.call(this,n,m)}
Zi.prototype=new Fu('value1','value2')
//实例化Zi()
var zi = new Zi('value3','value4')
console.log(zi)

多态

//父类
function Fu(value1,value2){
	this.keys1 = value1,
	this.keys2 = value2
}
Fu.prototype.fun=function(a){console.log(a)}
//子类
function Zi(n,m,c){
	Fu.call(this,n,m)
	this.c=c
}
Zi.prototype=new Fu('value1','value2')
Zi.prototype.dd='qwe'
//实例化Zi()
var zi = new Zi('value3','value4','sdf')
console.log(zi)

闭包

//即  闭包函数 闭包变量
//可以访问其他函数内部变量的函数
//即  定义在函数内部的函数
//---------------------------------------------------------
//方法一
function a(){
	var x=1
	//x 闭包变量 不会销毁，可能造成内存泄漏
	//b() 闭包函数
	function b(){
		console.log(x)
	}
	b()
}
a()
//-----------------------------------------------------
//方法二
function a(){
	var x=1
	//x 闭包变量 不会销毁，可能造成内存泄漏
	(function(){
		console.log(x)
	})()
}
a()
//-----------------------------------------------------
//方法三
function a(){
	var x=1
	//x 闭包变量 不会销毁，可能造成内存泄漏
	return function(){
		console.log(x)
	}
}
a()()
weixin_48211419
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
图文详解JavaScript的原型对象及原型链
10-21
许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。
对象的原型
洪布斯的博客
11-05 844
function People(name) { this.name = name; } var p1 = new People("洪布斯"); __proto__所有的对象都有一个隐藏的属性,__proto__对象的原型,值是一个对象，所以原型也叫做对象的原型 构造函数在创建对象的会调用构造函数的方法,prototype也是一个对象，叫做...
ng的点滴记录
weixin_30239339的博客
01-05 114
1,directive http://damoqiongqiu.iteye.com/blog/1917971/ 2,constructor https://segmentfault.com/q/1010000008450466?_ea=1651820 首先，“语法糖”的意思是现有技术本可以实现，但是采用某种写法会更加简洁优雅。最常见的就是声明对象采用的就是语法糖var a={b:111...
什么是对象的原型？
zayyo的博客
09-14 864
默认情况下, 原生的constructor属性是不可枚举的，如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了。我们在上一个构造函数的方式创建对象时，有一个弊端：会创建出重复的函数，比如running、eating这些函数。JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。不是的，因为它是一个函数，才有了这个特殊的属性。既然字面量创建的对象会有原型，那么创建的函数也会有原型吗？
JS对象与原型
叶
09-05 250
JavaScript对象是属性的无序集合，每个属性都有一个名称和对应的值。属性名称通常是字符串，因此我们可以说对象映射字符串到值。这种字符串到值的映射有各种各样的名称——类如众所熟知的以“hash”、“hashtable”、“dictionary”或“associative array”等为名的基本数据结构。
读书笔记（五）：对象和原型
FantasyBreaker的博客
01-20 270
1.new关键字 首先创建一个空对象，这个对象将会作为执行构造函数之后返回的对象实例。 使创建的空对象的原型（__proto__）指向构造函数的prototype属性。 将这个空对象赋值给构造函数内部的this，并执行构造函数逻辑。 根据构造函数执行逻辑，返回创建的对象或构造函数的显式返回值。 function Person(name) => { this.name = name } const person = new newFunc(Person, 'jack') function n
JavaScript 面向对象与原型
10-24
主要介绍了JavaScript 面向对象与原型,需要的朋友可以参考下
JS原型对象操作实例分析
10-15
主要介绍了JS原型对象操作,结合实例形式分析了JS原型对象基本原理、用法及操作注意事项,需要的朋友可以参考下
第16周-第16章节-Python3.5-JavaScript面向对象及原型.avi
02-10
第16周-第16章节-Python3.5-JavaScript面向对象及原型.avi
原型对象和对象原型
m0_73723713的博客
11-20 426
指向构造函数的prototype之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有。我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例化就可以共享这些方法。该属性指向该原型对象的构造函作用:因为重新赋值会丢失构造函数，可以在重新赋值情况下找回构造函数数。构造函数和原型对象中的this都指向实例化的对象。属性，指向另一个对象，所以我们也称为原型对象。Prototype就是实例对象里的对象原型。属性指向创建该实例对象的构造函数。
原型对象，对象原型，原型链
weixin_48340600的博客
10-02 769
1、原型（原型对象） 创建函数的方式有一种为构造函数进行创建 //利用构造函数创建对象 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); } } var l
原型及原型对象
qq_41910413的博客
12-18 379
举例： <script> function Students(){ //这就是一个构造函数 } //new一个实例对象 var stu=new Students(); </script> 1.构造函数：就是在script标签里面声明的那个函数Students. 2.原型对象：在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型...
原型模式与原型对象
Milan_KunderLa的博客
07-12 347
我们创建的每一个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。即原型对象。通俗一点讲，就是假如有一个类function Peson(){};//构造函数 Person.prototype.name = "csy";//通过原型对象添加属性和方法 Person.prototype.age = 18; ...
什么是对象、原型对象与原型链
qq_47443027的博客
03-24 518
对象 对象基础 对象的定义 对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）。 对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射，而数组做的是数字到值的映射。 创建一个对象通常先定义初始化变量。 var person = {}; person // Object {} 点表示法 对象的名字表现为一个命名空间（namespace），它必须写在第一位-----当你想访问对象内部的属性或方法时，然后是一.
对象、原型、原型链与继承
麦子的博客
05-06 324
对象、原型与原型链、this与apply/call方法，创建对象的方法、js中的继承方式
js里的所有对象都有原型吗?
Fky_mie的博客
04-19 3433
不是的, 用Object.create(null)创建的对象没有原型: var emObj = Object.create(null); console.log(emObj); console.log([]); console.log({}); 打印结果如下: 空对象都有原型, 但Object.create(null)没有. 因为Object.create(null)没有继承任何原型方法，也就是说它的原型链没有上一层。 猜想是堆内存里并没有放内容,而只是在栈内存里放了这个指针, 然后告诉内存分配空间.
什么是对象原型，什么是原型对象，什么是constructor，什么是原型链，详细解析
super帅的博客
03-27 2557
原型对象 ： prototype 概念：原型对象是构造函数上的一个属性，用来创建公共的方法 原型对象怎么使用? 如何使用原型对象设置公共方法? //语法: 构造函数.prototype.方法名 = function() {} function Student(uname) { this.uname = uname } // 设置公共方法 Student.prototype.eat = function () { ...
js进阶系列-原型对象VS对象原型
ZYQZXF的博客
02-21 627
前言 总所周知，原型在javascript中十分重要，今天把原型的知识复习了半天，在此做一个记录。 记录知识点的时候还是顺带着说一下这个知识点的作用。学的知识就是为了利用知识本身去完成某件事情。 花十分钟看完你将学会的知识点如下： 原型对象是什么 原型的作用 原型对象、对象实例、构造函数的关系 constructor的作用是什么 __proto __的产生(new一个对象的过程) 原型是什么...
Js基础之原型对象（一文看懂原型对象）
喵酱的笔记本
03-21 619
一、理解原型对象 由特定类型创建的所有实例，可能存在公共的属性，也可能存在实例特有的属性。为了保证公共属性不重复定义，将公共属性保存在原型对象中；为了实例特有的属性不共享独立存在，则将特有的属性保存在构造函数中。 如上原型链的原理图所示，构造函数、原型对象和实例之间有以下联系： 构造函数的prototype属性指向原型对象 原型对象的constructor属性指向构造函数 所有实例的...
javascript原型对象
最新发布
10-18
JavaScript中的每个对象都有一个原型对象，它充当该对象的模板。原型对象包含该对象的属性和方法，如果在该对象上找不到某个属性或方法，则会在原型对象上查找。如果还找不到，则会在原型对象的原型对象上查找，直到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值