JavaScript基础知识补习（3）

（声明：仅仅为博主的学习记录整理）

2018/8/17 杂乱整理

使用工厂方法创建对象

//使用工厂方法创建对象 批量创造嘛function createPerson(name,age,gender){//创建一个新的对象var obj = new Object();//添加属性obj.name = name ;obj.age = age ;obj.gender = gender ;obj.sayName = function(){alert(this.name);       //obj.name 还记得this的用法吗};//将新的对象返回return obj;}var obj2 = createPerson("dd",23,"nan");var obj3 = createPerson("aa",22,"nv");console.log(obj2);   //{name: "dd", age: 23, gender: "nan", sayName: ƒ}             console.log(obj3);   //{name: "aa", age: 22, gender: "nv", sayName: ƒ}obj2.sayName();

构造函数
创建一个构造函数，专门用来创建Person对象
构造函数就是一个普通的函数，创建方式和普通函数没有区别
不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同
普通函数就是直接调用，而构造函数要使用new关键字来调用

      * 构造函数的执行流程*     1.立刻创建一个新的对象*     2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新的对象*     3.逐行执行函数中的代码*     4.将创建的新对象作为返回值返回**   使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数成为一个类*     我们将通过对象创造实例

function Person(name,age,gender){this.name = name;this.age = age;this.gender = gender;this.sayName = function(){alert(this.name);};}function Dog(name,age){this.name = name;this.age = age;this.say = function(){alert("wang");};}var per  = new Person(11,22,33);var per2 = new Person("dd",21,"dd");var per3 = new Person("san",22,"ii");var dog = new Dog("san",22);var dog2 = new Dog("luck",22);console.log(per);console.log(per2);console.log(per3);console.log(dog);console.log(dog2);//使用instanceof可以检查一个对象是否是一个类的实例// 语法：//          对象 instanceof 构造函数//如果是，则返回TURE，反之FALSEconsole.log(per instanceof Person);console.log(dog instanceof Person);/**所有的对象都是Object的后代*所以任何对象和Object做instanceof检查时都会返回ture**/console.log(per instanceof Object);

上头的例子中还有一个问题，构造函数每执行一次，就会创建一个新的sayName方法和say方法，这样他执行多少次就会创建多少个，然而完全没必要这样，所以我们可以将这两个方法在全局作用域中定义。

做如下改动
this.sayName = fun;
//--将方法在全局作用域中定义--
function fun(){alert(this.name);};

上头那样的改动又引入了一个问题
将函数定义在全局作用域，污染了全局作用域的命名空间
而且定义在全局作用域中也很不安全
比如fun在以后的命名中一旦再出现就会覆盖掉原来的fun
所以尽量不要在全局作用域中定义函数

原型对象 protorype

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时，它所创建的对象中都会有个一个隐含的属性，指向该构造函数的原型对象，我们可以通过 _ proto_ 来访问该属性

** 原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容，统一设置到原型对象中
**当我们访问对象的一个属性或方法时，它会先在对象自身中找，有就用，没有再去原型对象中找

//代码就可以这么修改
//删除this.sayName = fun;
Person.prototype.sayName = function(){alert(this.name);};

用代码了解原型链的基本原理

function MyClass(){}//向原型对象中添加nameMyClass.prototype.name = "i'm prototype name";var mc = new MyClass();//在自己的对象中找不到，就去原型对象中找，找到了就用。 //console.log(mc.name);   //i'm prototype name//使用in检查对象中是否有某个属性时，如果对象中没有，但是原型中有，也会返回tureconsole.log("name" in mc);   //ture//可以使用对象的hasOwnProperty（） 来检查对象自身中是否有该属性console.log(mc.hasOwnProperty("age"));              //false//那我们也没有定义hasOwnPropery，这个是从哪儿来的呢，我们去找找console.log(mc.hasOwnProperty("hasOwnProperty"));               //flaseconsole.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));     //flase//原型对象也是对象，所以它也有原型//当我们使用一个对象的属性或方法时，会在自身中寻找//自身中如果没有则去原型对象中找//还是没有就去原型的原型中寻找，直到找到object对象的原型//Object对象的原型没有原型。如果在其中依然没有找到，则返回undefinedconsole.log(mc.__proto__.__proto__);           //{constructor: ƒ, __defineGetter__: ƒ, …}console.log(mc.__proto__.__proto__.__proto__); //到头了 null

toString
当我们直接在一个页面中打印一个对象时，实际上是输出对象的toString（）方法的返回值

对于toString在哪儿我们可以自行去代码中寻找答案

     console.log(per.hasOwnProperty("toString"));console.log(per.__proto__.hasOwnProperty("toString"));console.log(per.__proto__.__proto__.hasOwnProperty("toString"));

下面是一个通过prototype来修改toString的内容的用法

function Person(name,age,gender){this.name = name;this.age = age;this.gender = gender;}Person.prototype.toString = function(){return "我是"+this.name+"我今年"+this.age+"我是"+this.gender;};var per = new Person("悟空",12,"男");var per2 = new Person("bajie",12,"男");var result = per.toString();  //result = 我是悟空我今年12我是男console.log("result = "+ result);console.log(per);  //我是悟空我今年12我是男console.log(per2);

数组（Array）
内建对象，宿主对象，自定义对象

-数组也是一个对象
-他和我们普通对象的功能类似，也是用来储存一些值
-不同的是普通对象是使用字符串作为属性名的
而数组是使用数字来作为索引操作元素
索引（index） —> 从零开始的整数
-数组的储存性能比普通对象要好，在开发中我们经常是用数组来储存一些数据

向数组的最后一个位置添加元素
语法：数组[数组.length] = 值

以下为几个常用的Array对象属性---其他的还需要自行查阅

push()
* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
* - 可以将要添加的元素作为方法的参数传递
* 这样这些元素将会自动添加到数组末尾
* - 该方法会将新的数组长度作为返回值返回

var result = arr.push("1","2","3");

pop()
* -该方法可以删除数组的最后一个元素
* 并将被删除的元素作为返回值返回

arr.pop();

unshift()
* - 向数组开头添加一个或多个元素，并返回新的数组长度
* - 向前面插入元素以后，其他元素索引会依次调整

arr.unshift("jj");

shift()
* -删除并返回数组的第一个元素

arr.shift();

使用字面量创建一个数组

        var arr = [0,1,2,3,4,5];console.log(arr);

注意一下这个，两者是不同意思

            arr = [10];             console.log(arr);     //10 -->arr[0]=10arr2 = new Array(10);       console.log(arr2);    //,,,,,,,,, 创建了一个长度为10的数组！

slice()和splice()

var arr = ["白宇","朱一龙","吴磊","刘浩然","沈月"];/** slice()*  -从已有的数组提取指定的元素*  -该方法不会改变元素数组，而是将截取到的元素封装到一个新的数组中返回*  -参数：*      1.截取开始的位置的索引，包含开始索引*      2.截取结束的位置的索引，不包含结束索引*          -可以使用负数*              -1 倒数第一个索引 -2，-3以此类推*/var result = arr.slice(0,3);console.log(result);var result1 = arr.slice(3)console.log(result1);var result2 = arr.slice(0,-1)console.log(result2);/** splice()*  -可以用于删除数组中的指定元素*  -使用splice()会影响到原数组，会将指定元素从数组中删除*      并将被删除的元素作为返回值返回*  -参数：*      第一个参数 表示开始位置的索引*      第二个参数 表示删除的数量*      第三个参数及以后 *          可以传递新的元素，这些元素将会自动插入到开始位置的索引前面*/var result3 = arr.splice(2,1,"沈巍","面面");console.log(arr);console.log(result3);

forEach()方法
* 需要一个函数作为参数
* - 函数由我们创建但是不是由我们调用，称为回调函数
* - 数组中有几个元素函数就会执行几次,每次执行时，浏览器会将遍历到的元素
* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容
* -浏览器会在回调函数中传递三个参数
* 第一个参数，就是当前正在遍历的元素
* 第二个参数，就是当前正在遍历的元素的索引
* 第三个参数，就是正在遍历的数组

/** 一般我们都是用for循环去遍历，JS中还为我们提供了一个方法来遍历数组* forEach()*      -!!只支持IE8以上的浏览器!!*///创建一个数组var arr = ["s","z","s"];arr.forEach(function(value , index , obj){      //回调函数//console.log("hello")console.log("value = " + value);console.log("index = " + index);console.log(" obj = " + obj );console.log(arr == obj);});

垃圾回收（GC）
* -程序运行过程中也会产生垃圾
* 垃圾过多会导致程序运行速度过慢
* 所以需要GC
*
* -当一个变量没有任何的变量或属性对他进行引用，此时我们将永远无法操作此对象
* 此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，
* 所以这种垃圾必须进行清理
* -在JS中拥有自动的垃圾回收机制，会自动的将这些垃圾对象从内存中销毁，
* 我们也不需要也不能进行垃圾回收的操作
* -我们需要做的只是要将不再使用的对象设置为null即可

去重数组练习

//我的思路 先排序后删除var arr = [1,2,3,2,1,4,5,2,1,3,2,3,6,7,3,8];function Delet(a){for(var i = 0 ; i < a.length ; i++){a.sort();//去重if(a[i]==a[i+1]){a.splice(i,1);i--;}}                   console.log(a);}Delet(arr);


//老师的思路/** 取第一个元素和后面的元素比 */var arr = [1,2,3,2,1,4,5,2,1,3,2,3,6,7,3,8];for(var i = 0 ; i < arr.length ; i++ ){for(var j = i+1 ; j<arr.length; j++){if(arr[j] == arr[i]){arr.splice(j,1);j--;    }}}console.log(arr);

JavaScript基础知识补习（3）相关推荐

JavaScript基础知识补习（4）
数组方法的补充 3中也有一些数组的方法介绍,回顾一下我们首先创建一个数组(唯一的学习快落了QWQ) var arr = ["白宇","赵云澜"];var ar ...
JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
js java用var_Java基础———JavaScript基础知识
原标题:Java基础---JavaScript基础知识 JavaScript基础知识(1) Javascript的历史,Javascript是什么? JavaScript 诞生于 1995 年. 它当 ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
javaweb(02) JavaScript基础知识
javaweb(02): JavaScript基础知识 JavaScript简介为什么出现JavaScript Javascript是什么 JavaScript和Java的关系? 就像卡巴斯基和巴基 ...
Javascript基础知识之四（常用数组方法）
一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...
JavaScript 基础知识 - 入门篇(二)
11. 函数 11.1 函数的基础知识为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
JavaScript 基础知识
JavaScript 基础知识文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...

JavaScript基础知识补习（3）

JavaScript基础知识补习（3）相关推荐

最新文章

热门文章