JS小知识点01

简介: JS小知识点01

JS小知识点

in运算符

用处:检查一个对象中是否含有指定的属性,返回bool值

用法:“属性名” in 对象

例子:

var obj = new Object();
//var obj = {};
obj.test = 1;
"test" in obj = true;
"test2" in obj = false;

立即执行函数

//创建对象
(function(){
laert("我是一个匿名函数");
})
//调用,对象()
(function(){
alert("我是一个匿名函数");
})();
//传参调用
(function(a,b){
alert(a+b);
})(1,2);

变量的提前声明

使用var定义变量,变量会被提前声明。

console.log(a);//a = null
var a = 123;//会在开头先声明
相当于
var a;
console.log(a);
a = 123

函数的声明提前

使用函数声明形式创建的函数会被提前声明创建(优先级高),可在函数声明前调用函数。

//使用函数声明形式创建的函数会被提前声明
obj();
function obj(){};
//使用函数表达式不会声明提前
var fun = function(){};
fun();

工厂方法

可以大批量创建对象(创造的对象都是Object类型对象,无法区分不同类型的对象)

func createPerson(name,age){
  //创建新对象
    var obj = new object();
    obj.name = name;
    obj.age = age;
    return obj;
}

构造函数

可以区分类型(习惯:函数名首字母大写)需要使用new关键字来调用。

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        alert("你好,我是"+this.name);
    }
}
var per = new Person("张三","20");

缺点:构造函数每执行一次就会创建一个新的sayName方法,所有实例的sayName都是唯一的,这样导致了构造函数每执行一次就会创建一个新的方法(可以使所有对象共享同一个方法)

改进:将方法放在全局声明

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = fun;
}
function fun(){
        alert("你好,我是"+this.name);
};
var per = new Person("张三","20");

不足:污染了全局的命名空间,不安全(原型对象改进)

Tip:使用instanceof可以检查一个对象是否是一个类的实例(任何对象都是Object的实例)

语法:对象instanceof构造函数

返回值:bool值

例子:per instanceof Person

原型prototype

每创建一个函数,解析器都会向函数中添加一个唯一的属性prototype,这个属性对应一个对象,即原型对象,函数作为普通函数调用prototype没有任何作用,当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性指向该构造函数的原型对象,可以通过__ proto __来访问该属性。

例子:

function MyClass(){
}
var mc = new Myclass();
var mc1 = new Myclass();
//此时mc1.__proto__、mc2.__proto__、Myclass.prototype都指向同一对象

作用:原型对象就相当于一个公共的区域,所有同一个类的试例都可以访问到这个原型对象,可以将对象中共有的内容,统一设置到原型对象中。

当我们访问对象的一个属性或方法时,会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找。

例子:

function MyClass(){
}
MyClass.prototype.a = 123;
var mc = new Myclass();
//此时mc.a = 123

改进构造函数中的共有方法的创建:

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function (){
        alert("你好,我是"+this.name);
};
var per = new Person("张三","20");
per.sayName();

使用in检查对象中是否含有某个属性,使用hasOwnProperty()检查对象本身中是否有该属性。

function Person(name,age){
}
Person.prototype.name = "我是原型中的name"
var per = new Person();
console.log("name" in mc);
//此时会输出True
console.log(mc.hasOwnProperty("age"));
//此时输出为false

原型链:

原型对象也是对象,它也有原型,使用一个对象的属性或方法时会逐级往上查找,直到结束(找到Object对象的原型)。hasOwnProperty()方法存在于Object对象中。

目录
相关文章
|
1月前
|
JavaScript 前端开发 CDN
总结 vue3 的一些知识点:Vue.js 安装
总结 vue3 的一些知识点:Vue.js 安装
|
3月前
|
XML JSON 前端开发
|
1月前
|
JavaScript
总结 vue3 的一些知识点:​Vue.js 条件语句​
总结 vue3 的一些知识点:​Vue.js 条件语句​
|
5月前
|
JavaScript 前端开发 数据库
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-3
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
48 0
|
1月前
|
JavaScript 前端开发
javascript知识点
javascript知识点
|
2月前
|
JavaScript 前端开发 Java
[javascript]知识点
如果文中阐述不全或不对的,多多交流。
149 0
[javascript]知识点
|
2月前
|
JavaScript
总结vue3 的一些知识点:Vue.js 安装(下)
选取 Runoob,输出效果如下所示:
|
2月前
|
JavaScript 前端开发 CDN
总结vue3 的一些知识点:Vue.js 安装
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
|
2月前
|
JavaScript 前端开发
总结vue3 的一些知识点:​Vue.js 条件语句
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
|
2月前
|
JavaScript 前端开发 CDN
总结 vue3 的一些知识点:Vue.js 安装
总结 vue3 的一些知识点:Vue.js 安装