Javascript（ecmascript5.0）对象

榕树先生

于 2019-12-26 21:26:07 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/Departuretree/article/details/103658182

版权

JS组成
ECMAScript实际上是一种脚本在语法和语义上的标准
实际上JavaScript是由ECMAScript，DOM和BOM三者组成的。

在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。
但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。

JS面向对象开发
面向对象
基于对象
js只能操作单个对象
何为JS对象
JS对象是数据变量（object）拥有属性和方法
封装继承多态

var txt="hello";
//txt 变量：用来存储数据
/*
数据类型：
基本类型：数值型 布尔型 空值
引用类型：对象 数组 函数
*/

//表示创建了一个JS对象  拥有属性和方法

JS对象的创建方法

使用new运算符和构造函数创建对象
使用new对象可以创建一个对象的实例

//语法
var obj=new object();
//使用new运算符和构造函数来创建对象
//常用的构造函数包括：Object()  Array()  Data()

通过变量来访问所创建的对象

通过对象直接量创建对象

var myobject={属性名1：属性值1,属性名2：属性值2}

函数的返回值问题
语法：return 值
return后的值将会作为函数的执行结果返回
可以定义一个变量来接收结果

在函数中return后面的语句都不会执行
return后面不跟任何值返回undefined
不写return 返回undefined

事件的委托
父元素委托事件给子元素执行
事件委托的作用
1.支持为同一个DOM元素注册多个同类事件
2.可将事件分成事件捕获和事件冒泡机制

如果注册多个事件后注册的事件会覆盖先注册的事件

事件捕获
当一个事件触发后，从window对象触发，不断经过下级节点。在时间达到目标节点之前的过程就是捕获阶段。所有经过的节点，都会触发对应的事件。
事件冒泡
当事件达到目标节点后，会沿着捕获阶段的路线原路返回，同样所有经过的节点都会触发对应的事件。

事件委托的优点
1.提高性能：每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件，所占用的内存空间更少。
2.动态监听：使用事件委托可以自动绑定动态添加的元素，及新增的节点不需要主动添加也可以一样具有和其它元素一样的事件。

//例一
<script>
	window.onload=function(){
		var div=document.getElementById('div');
		//事件监听
		div.addEventListener('click',function(e){
            console.log(e.target)
        })
        //创建新元素
        let div3 = document.createElement('div');
        div3.setAttribute('class','div3')
        div3.innerHTML = 'div3';
        div.appendChild(div3)
	}
<script>


<body>
    <div id="div">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </div>
</body>



//例二
<script>
var ele_ul=document.getElementsByTagName("ul")[0];
    ele_ul.onclick=function (e){
        var target=e.target|| e.srcElement;
        //字符串大小写转化方法
        //toLowerCase  转换为小写
        //toupperCase  转化为大写
        if(target.nodeName.toLowerCase()==="li")
        {
            console.log("执行代码");
        }
    }
<script>

<ul>
	<li>列表一</li>
	<p>列表二</p>
</ul>

js中this代表什么？

var obj={
	foo:function(){console.log(this.bar)},
	bar:1
};

var fool=obj.foo;
var bar=2;
//写法一
obj.foo()//1   this代表obj环境
//写法二
foo();//2   this代表window环境

解析：this指的是函数运行时所在的环境。对于obj.foo()来说，foo在obj环境运行，所以this指向obj;对于foo()来说,foo运行在全局变量，所以两者运行结果不一致。

内存的数据结构

var obj={foo:5};

上面的代码将一个对象赋值给obj.JavaScript引擎会现在内存里面，生成一个对象{foo:5},然后把这个对象的地址赋值给变量obj.
在这里插入图片描述
也就是说，变量obj是一个地址。如果要读取obj.foo，引擎先从obj拿到变量地址，然后再从该地址读出原始的对象，返回他的foo属性。原始的对象以字典的结构保存，每一个属性名（foo）都应对应一个属性描述对象(下图黄框)。

foo属性的值保存在属性对象的value属性里面
属性的值为函数时：

var obj={foo:function(){}};

引擎会将函数单独保存在内存中，然后将函数的地址赋给foo属性的value属性。
在这里插入图片描述
由于函数是一个单独的值，所以他可以在不同的环境执行

var f=function(){};
var obj={f:f};

//单独执行
f()
//obj环境执行
obj.f();

环境变量

var f=function (){
	console.(x);
}
//x由当前的运行环境提供

this的目的就是在函数体内部，指代当前执行环境。

var f=function (){
	console.(this.x);
}

函数体内的this.x指向当前运行环境的x

var f = function () {
  console.log(this.x);
}
var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

在这里插入图片描述
在obj环境中，this.x指向obj.x
一旦var foo=obj.foo变量foo就指向函数本身
事件里面的this指代当前执行对象

JS里面添加的样式全是行内样式
内嵌样式的获取方式

 console.log(window.getComputedStyle(div));

getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象

offsetLeft 左偏移量
offsettop 上偏移量
offsetHeight 内容高+padding+边框
offsetWidth 内容宽+padding+边框
height 内容高

值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;)有关系

获取页面高
可视区域的高

console.log(document,documentElement.clientHeight);

可视区域的宽

console.log(document,documentElement.clientWidth);

body的真实高

console.log(document.body.clientHeight);

body的真实宽

console.log(document.body.clientWidth);

获取屏幕的实际宽和高（不包含任务栏）

console.log(window.screen.availHeight);
console.log(window.screen.avaiWidth);

获取屏幕的实际宽和高（包含任务栏）

console.log(window.screen.Height);
console.log(window.screen.Width);

浏览器上边距和左边距

console.log(window.screenTop);
console.log(window.screenLeft);

滚动条滑动距离

console.log(window.scrollX);
console.log(window.scrollY);
console.log(document.documentElement.scrollTop);
console.log(document.documentElement.scrollLeft);

数组：
数字里面的属性:length
数组里面的方法:

//every：检测数组里面的所有元素是否满足条件 返回true false  
arr.every(function(val,index){
	return val>0;
});

//concat：拼接数组  返回数组 
arr.concat(arr1);

//fill:固定值替换  不写后两个参数 代表全部替换  原数组受影响
//要替换的值   从哪个位置开始替换  替换几个 返回数组
arr.fill("room",0,1);

//filter：过滤方法  过滤出满足条件的元素  返回数组 
arr.filter(function(val,index,arr){
	if(val>8)
	{
		return val;
	}
});

//find：返回数组满足条件的第一个值 返回单个值
arr.find(function(var,index,arr)){
	if(val>8){
		return val;
	}
};

//forEach：数组遍历方法  相当代替for遍历数组  无返回值
arr.forEach(function(val,index,arr){

})

//map：映射   产生新数组  不写返回值 类似遍历数组
arr.map(function(val.index.arr){
	
})

//reduce：累计器
arr.reduce(function(val,val2){

})
//reserve：倒叙
//some：判断
arr.some(function(val,index,arr){
	if(val%5==0)
	{
		return val;
	}
})


//sort:排序  默认小-大
arr.sort(function(n1,n2){
	return  n2-n1;//从大到小
})

追加
//push：后追加
//unshift：前追加
删除
//pop:后删除
//shift：前删除
截断
//slice(0,2)
//splice(0,2)  对原数组有影响


//toString:将数组转化为字符

字符串：

//截断
substr
substring
slice
//charAt：根据索引取字符
//遍历字符
for(var i=0;i<s1.length;i++){
	console.log(arr.charAt(i));
}

for(var index in  s1){
	console.log(s1.charAt(index));
}

榕树先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript（ecmascript5.0）对象

JS组成ECMAScript实际上是一种脚本在语法和语义上的标准实际上JavaScript是由ECMAScript，DOM和BOM三者组成的。在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。JS面向对象开发何为JS对象JS对象是数...
复制链接

扫一扫